Yii2 pjax corrupts styles - php

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.

Answer 2

Thanks to pjax that we can reload selective content easily.
Issue
In Yii2, pjax also do try to loads the anchors (links) etc present inside the pjax container within the same container. Which means it doesn't allow such links to load, full pages. This causes crippling of the other parts / tags in followed pages.
Solution
In order to avoid this, you need to figure out a way to load your links/pages outside the pjax container. One method that worked for my action links is as following:
Example
This is my custom actions column:
[
'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")']);
},
],
Explanation
You can see that I have used onclick method to follow the link using JavaScript:
['onclick' =>'window.location.href=this.getAttribute("href")']