phptwitter-bootstrapgridviewyii2pager

Maintain Bootstrap tab on Yii2 GridView page changing


I have a page that has 5 bootstrap tabs. When I change pager on any tab, moves to the first tab occurs. How to activate the tab which was to change the pager.

Entire page gets 5 dataProviders. Each like

$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',
        ],
    ]);

In a view file created bootstrap tabs

<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>

and each GridView widget looks like

<?= 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'
            ],
        ]) ?>

Solution

  • Try this:

    $(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');
       }
    });