Cakephp comes with inbuilt pagination and sorting component and helper which work well in any app. However in order to make data tables ajax driven one might want to look at alternative solutions. One such solution is Cakephp Datatablse Plugin which uses datatables. It works quite well but for defining data columns everytime in controller action and in the view file I though it proved something more expensive than I anticipated. Also, I was not sure how it would work with more complex associations, searches/filtering and sorting so I decided to use Cakephp’s pagination helper by adding few lines of jQuery code to make it ajax driven.
Let’s start first with simple implementation of paginated users records. The controller action which is index() to load all data. No fancy work here.
[code lang=”php”]
public function index()
{
$this->paginate = [];
$users = $this->paginate($this->Cases);
$this->set(‘users’, $users);
}
[/code]
In index.ctp view file following my code to display the table data. We will edit this file later on to include some php and javascript code to support ajax calls.
[code lang=”php”]
<div id="users-table-wrap">
<?php echo $this->element(‘users-table’); ?>
</div>
[/code]
And the users-table.ctp element
[code lang=”html”]
<table class="table table-striped table-ajaxed">
<thead>
<tr>
<th><?php echo $this->Paginator->sort(‘id’);?></th>
<th><?php echo $this->Paginator->sort(‘first_name’) ?></th>
<th><?php echo $this->Paginator->sort(‘last_name’) ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user):?>
<tr>
<td><?php echo $user->id; ?></td>
<td><?php echo h($user->first_name) ?></td>
<td><?php echo h($user->last_name) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="paginator">
Showing page <?= $this->Paginator->counter() ?>
<ul class="pagination">
<?php echo $this->Paginator->prev(‘< ‘ . __(‘previous’)) ?>
<?php echo $this->Paginator->numbers() ?>
<?php echo $this->Paginator->next(__(‘next’) . ‘ >’) ?>
</ul>
</div>
[/code]
Okay. Let first start with editing index.ctp view to include Javascript/jQuery code to support ajax calls. This is the only javascript part to support ajax pagination in Cakephp 3.x.
[code lang=”javascript”]
jQuery(function($) {
$(‘#users-table-wrap’).on(‘click’, ‘.table-ajaxed th a, .pagination a’, function() {
var url = $(this).attr(‘href’);
if( !url ) return false;
//loader(‘show’); //show loader
$(‘#users-table-wrap’).load( url, function() {
//loader(‘hide’); //hide loader
});
return false;
})
})
[/code]
The code above is quite self explainatory for a developerr good in coding. It binds the click events of the sorting links and pagination links. You can enhance this function to apply more filters to clickable links, for example appending search parameters to the url.
And finally, add the following php code to the very beginning of the index.ctp view file. This will render users-table.ctp when it hits index.ctp as a ajax call through index() controller method.
[code lang=”php”]
if($this->request->isAjax()) {
echo $this->element(‘users-table’);
exit;
}
[/code]
I hope you find it useful.
