2016-03-19 11 views
1

5つのブートストラップタブを持つページがあります。いずれかのタブでページャーを変更すると、最初のタブに移動します。 ページャを変更するタブをアクティブにする方法。Yii2 GridViewページのBootstrapタブを変更する

全ページに5つのデータプロバイダがあります。ビューファイルで

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

のような、それぞれ

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

答えて

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'); 
    } 
}); 
+0

を。これは私のために完璧に働き、他の人を助けることを願っています – iTPEMOP

+0

@iTPEMOP。有用であれば、アップアップを心がけてください。 –

+0

私はまだできません。 Repスコアは防げる。 – iTPEMOP

関連する問題