维护 Yii2 GridView 页面更改的 Bootstrap 选项卡

Question

我的页面有 5 个 bootstrap 标签。当我在任何选项卡上更改寻呼机时，都会移动到第一个选项卡。如何激活要更改寻呼机的选项卡。

整个页面获得 5 个 dataProvider。每一个赞

$overallProvider = new ArrayDataProvider([
        'allModels' => $overallArray,
        'pagination' => [
            'pageSize' => 100,
            'pageParam' => 'overall-page',
            'params' => array_merge($_GET, ['#' => 'overall']),
        ],
        'sort' => [
            'attributes' => ['rep'],
            'defaultOrder' => ['rep' => SORT_DESC],
            'sortParam' => 'overall-sort',
        ],
    ]);

在视图文件中创建了 bootstrap 个选项卡

<ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#overall" data-toggle="tab">Overall</a></li>
    <li><a href="#circuit" data-toggle="tab">Circuit</a></li>
    <li><a href="#sprint" data-toggle="tab">Sprint</a></li>
    <li><a href="#drift" data-toggle="tab">Drag</a></li>
    <li><a href="#drag" data-toggle="tab">Drift</a></li>
</ul>

并且每个 GridView 小部件看起来像

<?= GridView::widget([
            'dataProvider' => $overall,
            'layout' => "<div class='text-right'>{summary}</div>\n{items}\n<div class='text-center'>{pager}</div>",
            'pager' => [
                'options'=>['class'=>'pagination pagination-sm'],
                'hideOnSinglePage'=>true,
                'lastPageLabel'=>'>>',
                'firstPageLabel'=>'<<',
            ],
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                'username',
                'rep:decimal',
                'wins:decimal',
                'loses:decimal',
                'disc:decimal',
                'avg_opp_rating:decimal',
                'avg_opp_rep:decimal'
            ],
        ]) ?>

Answer 1

试试这个：

$(document).ready(function() { 
   $('a[data-toggle=\"tab\"]').on('show.bs.tab', function (e) {
      localStorage.setItem('lastTab', $(this).attr('href'));
   });
   var lastTab = localStorage.getItem('lastTab');
   if (lastTab) {
      $('[href=\"' + lastTab + '\"]').tab('show');
   }
});

维护 Yii2 GridView 页面更改的 Bootstrap 选项卡

Maintain Bootstrap tab on Yii2 GridView page changing

tabs

gridview

pager

twitter-bootstrap

yii2