Why can pagination work incorrectly in GridViews loaded via Ajax?

Question

Yii

Part of a view with Tab panels. The content is loaded by the script.

<?php
$js = <<< 'SCRIPT'
$('[data-toggle="tab-ajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');

    return false;
});
SCRIPT;
$this->registerJs($js);
?>
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs tabs-up">
        <li><?= Html::a('tab1', ['/site/tab1'], ['data-target' => '#tab1pane', 'data-toggle' => 'tab-ajax'])?></li>
        <li><?= Html::a('tab2', ['/site/tab2'], ['data-target' => '#tab2pane', 'data-toggle' => 'tab-ajax'])?></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1pane"></div>
        <div class="tab-pane" id="tab2pane"></div>
    </div>

</div>

Loadable tab view

$dataProvider = new  ActiveDataProvider([
    'query' => Street::find(),
    'pagination' => ['pageSize' => 10, 'pageParam' => 'tab1content',],
]);

Pjax::begin(['enablePushState' => true]);
echo GridView::widget([
    'dataProvider' => $dataProvider,
    'options' => ['id'=>'tab1content'],
]);
Pjax::end();

the loaded GridView with pagination works, but if you switch to another tab and back, then pagination no longer works.
What could be my mistake?

Answer 1

This is most likely because the content of the tab goes to display: none, when switching back - to display: block. In this case, it is necessary to reinitialize the function responsible for the logic of the content. In fact, instead, I would write a class-state for the content of the css tab (by the way, you have it), in which it does not need to go to display: none. For example:

.tab-pane{
pointer-events: none;
opacity: 0;
&.active{
pointer-events: auto;
opacity: 1;
}
}

Then its value in the context of the house with all the parameters will be saved, and js will stop losing it. Naturally, instead of $this.tab('show'); you need to write your own tabs with class manipulation.
As an example (there is a lot of extra stuff for an adaptive base, but in the same directory you can check the markup and pick up only what you need):
https://github.com/WebKieth/Black-UI/blob/master/s...