RSS

Tag Archives: Ajax pagination

Ajax pagination with jQuery in cakephp 2.x.x

For apply ajax pagination in cakephp 2.x.x follow these below steps:

Image

1). Copy File JqueryEngineHelper.php From lib/Cake/View/Helper and Paste to  app/View/Helper.

2). Include Latest jQuery File to your layout file for ajax paging.

ex- in app/View/Layouts/ajaxpagination.ctp

<!DOCTYPE html>
<html>
<head>

<!– This is mandotary –>
<?php echo $this->Html->script(‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8217;); ?>
</head>
<body>
<div id=”spinner” style=”display: none; float: right;”>
<?php echo $this->Html->image(‘indicator.gif’, array(‘id’ => ‘busy-indicator’)); ?>
</div>
<div id=”content”>
<?php echo $content_for_layout; ?>
</div>

</body>
</html>

NOTE: Here ‘indicator.gif’ image is a loader image.you can place this image in app/webroot/img directory.

3).  To make Javascript enhanced links instead of plain HTML links, you have to use options() parameter to paginator helper .

ex- In your view ctp file add the following:

<!– This is mandotary –>
<?php $this->paginator->options(array(‘update’ => ‘#content’,’before’ => $this->Js->get(‘#spinner’)->effect(‘fadeIn’, array(‘buffer’ => false)),’complete’ => $this->Js->get(‘#spinner’)->effect(‘fadeOut’, array(‘buffer’ => false))));?>

Showing Page <?php echo $this->paginator->counter(); ?>
<table>
<tr>
<th><?php echo $this->paginator->sort(‘Post.title’, ‘Title’);?></th>
<th><?php echo $this->paginator->sort(‘Post.created’, ‘Created Date’);?></th>
</tr>
<?php foreach($customers as $customer): ?>
<tr>
<td style=”padding-right: 30px;”><?php echo $customer[‘Post’][‘title’]; ?></td>
<td style=”padding-left: 30px;”><?php echo $customer[‘Post’][‘created’]; ?></td>
</tr>
<?php endforeach; ?>
</table>

<?php echo $this->paginator->prev(); ?> – &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php echo $this->paginator->numbers(array(‘separator’=>’ – ‘)); ?> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php echo $this->paginator->next(‘Next Page’); ?>
<?php echo $this->Js->writeBuffer();?> <!– This is mandotary –>

At the bottom of your view file. Be sure to include:

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

If you omit this you will not be able to chain ajax pagination links. When you write the buffer, it is also cleared, so you don’t have worry about the same Javascript being output twice.

4). Controller File. add the following lines to your controller action:

$this->layout = ‘ajaxpagination’;
$this->set(‘customers’, $this->paginate(‘Post’)); <!– Record from the model which you want to show in view file with pagination. –>

Advertisements
 
3 Comments

Posted by on Feb 7, 2013 in Cake PHP, PHP

 

Tags: , , , , , , , ,

 
%d bloggers like this: