How to use GridView with AJAX

How-tos

2.0

widget,yii2, pjax, widget

With the adoption of <a title="jquery-pjax" href="https://github.com/yiisoft/jquery-pjax" target="_blank">PJax</a> on Yii2 things  have change quite a bit with GridView when it comes to work with them in AJAX mode. It will probably be confusing at the beginning, but then you will soon realize how powerful the new approach is. <h2>
 
# Using PJax widget</h2>
 
The way to work with GridView in AJAX mode, is by using the PJax widget. The basic usage is like the following:
```php

<?php \yii\widgets\Pjax::begin(); ?>
<?= GridView::widget([Thats it, from now, the links and forms (filtering) on your GridView widget will work on ajax mode. But wait a minute, how come the action buttons do not work on AJAX mode? Well, if you check closely the rendered HTML, you will see that the links do have the HTML5 attribute <code>data-pjax="0"</code>. That means that if you don't wish PJax to handle your links, you need to add this HTML5 attribute to them.
<h2>
 
# How to Update my GridView</h2>
 
You will surely missing <code>$('#grid').yiiGridView('update')</code> and wondering how to do it with <code>PJax</code>. The following code comes to the rescue: ~~~
 
[```javascript] // on your javascript // I highly recommend that you setup the id of your PJax widget $.pjax.reload({container:'#idofyourpjaxwidget'}); ~~~``` For more information about the options that you can pass to the <code>reload</code> function, please check the <a href="https://github.com/yiisoft/jquery-pjax/blob/master/jquery.pjax.js#L131">PJax plugin code</a>. <h2>
 
# Final Notes</h2>
 
The <code>PJax</code> widget works with any links and/or forms that are inside its <code>begin()</code> and <code>closeend()</code> statements. That means, that this tutorial is also valid for <code>ListView</code>, <code>LinkPager</code>, etc... Anything that holds a link and/or a form. HappYii2 coding