选项卡内的 Yii2 分页

Question

我在 yii2 上使用 TAB

<div class="container">
  <center><h1>Team</h1></center>
  <ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#home">Introduction</a></li>
 <li><a data-toggle="tab" href="#menu1">Member</a></li>
  </ul>

  <div class="tab-content">
<div id="home" class="tab-pane fade in active">
      <h3>About</h3>
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tempus arcu, in placerat ex. Ut laoreet ornare dui quis maximus. Aenean sit amet tristique urna, in scelerisque augue. Sed sodales mi sit amet lectus efficitur rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin congue lectus id erat tempor vulputate. Curabitur in blandit odio, convallis posuere metus. Pellentesque dictum magna non purus ultrices viverra. Vestibulum ex orci, porttitor ac semper at, posuere sed turpis. Aenean varius libero id orci scelerisque egestas. Etiam dapibus ante ut mattis fringilla. Donec metus velit, vulputate sit amet laoreet at, pellentesque id risus. Phasellus tincidunt commodo mauris, iaculis aliquet nisl facilisis a.
</p>
   </div>
 <div id="menu1" class="tab-pane fade">
      <?php foreach($models as $model) { ?>
      <h3><?=$model->id; ?></h3>
      <p><?=$model->name; ?></p>
   <?php } ?>
   <?php echo \yii\widgets\LinkPager::widget([
    'pagination' => $pagination,
]); ?>
  </div>
</div>

我在控制器中的功能

public function actionIndex()
{
    $query = Teams::find();
    $teams = $query->all();
    $count = count($teams);
    $pagination = new Pagination(['totalCount' => $count, 'pageSize'=>10]);
    $models = $query->offset($pagination->offset)
    ->limit($pagination->limit)
    ->all();
return $this->render('index', [
        'models' => $models,
        'pagination' => $pagination,
    ]);
}

我使用了分页来分页1个标签页（成员）的内容，但是当我点击第2、3、4页时页面自动刷新到默认标签页Team… 反正有没有让标签内的分页工作？谢谢

Answer 1

使用yii\widgets\Pjax，它只会获取pjax块中的内容

<?php Pjax::begin() ?>
    <?php foreach($models as $model) { ?>
        <h3><?=$model->id; ?></h3>
        <p><?=$model->name; ?></p>
    <?php } ?>
    <?php echo \yii\widgets\LinkPager::widget([
        'pagination' => $pagination,
    ]); ?>
<?php Pjax::end() ?>

Answer 2

Cause:

当您点击分页时 link 页面会刷新，并且由于 jQuery 或 javascript 插件，您会丢失视图中的状态。

Solution:

在您的控制器中添加：

    if (Yii::$app->request->get('page', false) != false) { // page is your pagination parameter
        $this->registerJs(
    "jQuery(document).ready(function(){ $('#member_tab').click() })",
    View::POS_END,
    'member_tab_clicker' // Unique Handler For JS Block
);
    }

并在您的 html 更新 link 中添加 ID 属性：

<a data-toggle="tab" href="#menu1" id="member_tab">Member</a>

确保您已将 jquery 包含在您的项目中。这不是标准方法，但它会解决你的问题。

选项卡内的 Yii2 分页

Yii2 pagination within tabs

twitter-bootstrap

yii2

yii2-basic-app