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.
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.
Thanks to pjax that we can reload selective content easily.
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.
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:
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")']);
},
],
You can see that I have used onclick method to follow the link using JavaScript:
['onclick' =>'window.location.href=this.getAttribute("href")']