RSS

Ajax pagination with jQuery in cakephp 2.x.x

07 Feb

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. –>

 
3 Comments

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

 

Tags: , , , , , , , ,

3 responses to “Ajax pagination with jQuery in cakephp 2.x.x

  1. lista de emails

    Feb 8, 2013 at 9:45 pm

     
  2. lista de email

    Feb 9, 2013 at 12:29 am

    awesome blog to read…love to read it, thanks for all. lista de email lista de email lista de email lista de email lista de email

     
  3. itechonology

    Feb 14, 2013 at 10:43 am

    Reblogged this on ITechonology.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: