Cakephp Ajax Pagination:

This blog will help you to paginate page using ajax. First of all create Users table and add some data in it, now create its model, view and controller by following command:

$ cd /var/www/html/cakephp/app
$ /var/www/html/cakephp/app$ sudo ./Console/cake bake all

Follow instructions and it will create model, view and controller for User. Now open AppController and add following lines:

class AppController extends Controller {
	public $helpers = array('Js');
	public $components = array('RequestHandler');
}

Open UserController and add lines to index() function:

public $components = array('Paginator');

public function index() {
		$this->User->recursive = 0;
		$this->paginate=array('limit'=>3);
		$this->set('users', $this->Paginator->paginate());
}

Also don't forget to load components Paginator in UsersController. Now upload jquery.js file to respective source directory: cakephp/app/webroot/js/jquery.js

Now open view index file of User: index.ctp and add few lines to it.

<?php echo $this->Html->script('jquery'); 
      $this->Paginator->options(array(
      'update'=>'#content',
      'before'=>'',
      'complete'=>''
));	
?>
...
...
...
...
...

<?php echo $this->Js->writeBuffer(); ?>

#content is the div id where the content will be updated when ajax will render the view file. You can see default.ctp file in Layouts.

<div id="content">
   <?php echo $this->Flash->render(); ?>
   <?php echo $this->fetch('content'); ?>
</div>

So your code for index.ctp will look like following:

<?php echo $this->Html->script('jquery'); 
      $this->Paginator->options(array(
      'update'=>'#content',
      'before'=>'',
      'complete'=>''
));	
?>
<div class="users index">
	<h2><?php echo __('Users'); ?></h2>
	<table cellpadding="0" cellspacing="0">
	<thead>
	<tr>
			<th><?php echo $this->Paginator->sort('id'); ?></th>
			<th><?php echo $this->Paginator->sort('username'); ?></th>
			<th><?php echo $this->Paginator->sort('password'); ?></th>
			<th><?php echo $this->Paginator->sort('role'); ?></th>
			<th><?php echo $this->Paginator->sort('created'); ?></th>
			<th><?php echo $this->Paginator->sort('modified'); ?></th>
			<th class="actions"><?php echo __('Actions'); ?></th>
	</tr>
	</thead>
	<tbody>
	<?php foreach ($users as $user): ?>
	<tr>
		<td><?php echo h($user['User']['id']); ?>&nbsp;</td>
		<td><?php echo h($user['User']['username']); ?>&nbsp;</td>
		<td><?php echo h($user['User']['password']); ?>&nbsp;</td>
		<td><?php echo h($user['User']['role']); ?>&nbsp;</td>
		<td><?php echo h($user['User']['created']); ?>&nbsp;</td>
		<td><?php echo h($user['User']['modified']); ?>&nbsp;</td>
		<td class="actions">
			<?php echo $this->Html->link(__('View'), array('action' => 'view', $user['User']['id'])); ?>
			<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $user['User']['id'])); ?>
			<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $user['User']['id']), array('confirm' => __('Are you sure you want to delete # %s?', $user['User']['id']))); ?>
		</td>
	</tr>
<?php endforeach; ?>
	</tbody>
	</table>
	<p>
	<?php
	echo $this->Paginator->counter(array(
		'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
	));
	?>	</p>
	<div class="paging">
	<?php
		echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
		echo $this->Paginator->numbers(array('separator' => ''));
		echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
	?>
	</div>
</div>
<div class="actions">
	<h3><?php echo __('Actions'); ?></h3>
	<ul>
		<li><?php echo $this->Html->link(__('New User'), array('action' => 'add')); ?></li>
	</ul>
</div>
<?php echo $this->Js->writeBuffer(); ?>

All done! . Now just refresh the page and enjoy ajax pagination.

Thanks for reading the blog.