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