Yii2 pjax破坏了风格

Question

I'm using Yii2 and i have a view which displays a table:

<div class="table-responsive">
<?php  yii\widgets\Pjax::begin()?>    
<?= GridView::widget([
            'dataProvider' => $dataProvider,
            'summary'=> "",
            'tableOptions' => ['id'=>'smartTable',
                'class' => 'display table-bordered-custom',
                'cellspacing' => 0,
                'width' => "100%"
                ],
            'columns' => [
                [
                  'class' => 'yii\grid\SerialColumn'],    
                  'product_code',
                  'product_name',
                  'product_status',    
                   [
                    'class' => 'yii\grid\ActionColumn',
                    'header' => 'Operation',
                    'template' => '{view}',
                    'headerOptions' => ['class' => 'no-sort'],
                    'buttons' => [
                        'view' => function ($url, $model) {
                            return Html::a(
                                'Edit<i class="material-icons">chevron_right</i>',
                                ['update', 'id'=>$model->product_id],
                                [
                                    'class' => 'btn',
                                    'data-pjax' => '',
                                ]
                            );
                        },
                    ],
                ],
            ],    
]);    
?>
<?php Pjax::end(); ?>    
</div>        

My controller:

class ProductController extends Controller
{

/**
 * @inheritdoc
 */
public function behaviors()
{
    return [
        'verbs' => [
            'class' => VerbFilter::class,
            'actions' => [
                'delete' => ['POST'],
            ],
        ],
    ];
}

/**
 * Lists all Product models.
 * @return mixed
 */
public function actionIndex()
{
    $dataProvider = new ActiveDataProvider([
        'query' => Product::find(),
        'sort' => false,
        'pagination'=> [
            'pageSize' => 4
        ]
    ]);

    return $this->render('index', [
        'dataProvider' => $dataProvider,
    ]);
}
}    

Edit: My controller has a simple action called index.

My problem is that when i click on the page number and get new info, all the styles I've given to my table disappear.
If i remove Pjax everything is okay because the entire page reloads.

Why? please help me.

Answer 1

I finally managed to fix this! but i'm not sure it's the best.
With pjax events you can solve such problems:

$(document).on("pjax:success", function() {
 $('#smartTable').DataTable({
     "paging": false,
     "responsive": true,
     "dom": 'iftlp',
     "bProcessing": true,
     "aoColumnDefs": [ // EXCEPT SORTING
         {'bSortable': false, 'aTargets': ['no-sort']}
     ],
     });
 $('#simpleTable').DataTable({
     "responsive": true,
     "dom": 't'
 });
});

So every time our pjax is successfully executed, we will re-apply the style we need.
That's it, i hope to be useful to others.