Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Cakephp 2.7: How to paginate using ajax in cakephp?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 731
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: