Yii2 pjax破坏了风格

Question

我使用的是Yii2，我有一个显示表格的视图：

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

我的控制器：

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

编辑：我的控制器有一个名为index的简单操作。

我的问题是，当我点击页码并获取新信息时，我给桌子的所有样式都会消失。
如果我删除 Pjax 一切正常，因为整个页面重新加载。

为什么呢？请帮帮我。

Answer 1

我终于设法解决了这个问题！但我不确定它是最好的。
使用 pjax事件，您可以解决此类问题：

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

因此，每次pjax成功执行，我们都会重新应用我们需要的风格 这就是它，我希望对其他人有用。

Answer 2

感谢pjax，我们可以轻松地重新加载选择性内容。

问题

在Yii2中，pjax也会尝试将pjax容器内部存在的锚点（链接）等加载到同一容器中。这意味着它不允许此类链接加载整页。这会导致后续页面中其他部分/标签的损坏。

解决方案

为了避免这种情况，您需要找到一种将链接/页面加载到pjax容器之外的方法。适用于我的操作链接的一种方法如下：

示例

这是我的自定义操作列：

[
'label'=>'Options',
'format' => 'raw',
'value'=>function ($data) {
return Html::a('<i class="glyphicon glyphicon-eye-open"></i>', ['short-message/conversation', 'id'=> $data["id"]], ['onclick' =>'window.location.href=this.getAttribute("href")']);
},
],

说明

您可以看到我已经使用onclick方法来使用JavaScript跟踪链接：

 ['onclick' =>'window.location.href=this.getAttribute("href")']