Yii2 pjax 损坏样式

Question

我正在使用 Yii2，我有一个显示 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>

我的控制器：

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

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

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

为什么？请帮助我。

Answer 1

我终于解决了这个问题！但我不确定这是最好的。
使用 pjax events 你可以解决这样的问题：

$(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执行成功，我们就会re-apply我们需要的样式。
就这样吧，希望对大家有用

Answer 2

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

问题

在 Yii2 中，pjax 也会尝试加载存在于同一容器内的 pjax 容器内的锚点（links）等。这意味着它不允许这样的 link 加载整页。这会导致后续页面中的其他部分/标签瘫痪。

解决方案

为了避免这种情况，您需要想办法在 pjax 容器外加载您的 links/pages。一种适用于我的操作 links 的方法如下：

例子

这是我的自定义操作列：

[
'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 方法来跟随 link using JavaScript:

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

Yii2 pjax 损坏样式

Yii2 pjax corrupts styles

php

ajax

pjax

yii2

问题

解决方案

例子

说明