CakePhp Pagination with JQuery

This example is the continuation of the previous post which is CakePhp Pagination Example. Now we are going to use JQuery to paginate data in same time sorting data by column. 

The advantage of using  JQuery is every time we display another group of data the entire page will not reload. So, it’s means less time of displaying information because we are just going to get the specific data to our database.

We are going to use the code of the previous post  “CakePhp Pagination Example”. We are just going to add some functionality.   

Here is the file structure.

1.) Download JQuery library and save to App/webroot/js folder as jquery.js
2.) We are going to create students table in our database.

CREATE TABLE students (
     id int NOT NULL AUTO_INCREMENT,
     code VARCHAR(100) NOT NULL,
     first_name VARCHAR(100) NOT NULL,
     last_name VARCHAR(100) NOT NULL,
     middle_name VARCHAR(100) NOT NULL,
     PRIMARY KEY (id)
)

3.) Create StudentsController.php in App/Controller folder.

<?php
class StudentsController extends AppController{
    var $name = 'Students';
    var $uses = array('Student');
    
    var $helpers = array('Js'); //*** IMPORTANT 
    var $components = array('RequestHandler'); //*** IMPORTANT
    
    
    function index(){
        //*** LIMIT 5 AND ORDER BY STUDENT ID 
        $this->paginate = array('limit'=>5,'order'=>array('Student.id'=>'Desc'));
        
        //*** SET DATA
        $this->set('students',$this->paginate());
    }
    /**
     * Add some extra records
     */
    function addStudent(){
        
        //**** ADD DATA TO STUDENTS TABLE
        for($x = 0 ; $x < 10 ; $x++){
            
            $this->Student->create();
            $this->Student->set('code','code_'.$x);
            $this->Student->set('first_name','first_name_'.$x);
            $this->Student->set('last_name','last_name_'.$x);
            $this->Student->set('middle_name','middle_name_'.$x);
            $this->Student->save();
        }
        //*** SET FLASH MESSAGE
        $this->Session->setFlash('Added some record');
        //*** REDIRECT TO INDEX
        $this->redirect(array('controller' => 'students','action' => 'index'));
    }
    
    /**
     * Delete all record
     */
    function deleteStudent(){
        //*** DELETE ALL DATA IN STUDENT TABLE
        $this->Student->query('TRUNCATE students');
        //*** SET FLASH MESSAGE
        $this->Session->setFlash('All record deleted');
        //*** REDIRECT TO INDEX
        $this->redirect(array('controller' => 'students','action' => 'index'));
    }
}
?>

4.) Create Student.php in App/Model folder.
     Here is the code.

<?php
class Student extends AppModel{
    var $name = 'Student';
}
?>

5.) Create folder Students in App/View.

6.) Create index.ctp in App/View/Students.
     Here is the code.

<!-- LOAD JQUERY-->
<?php echo $this->Html->script('jquery',FALSE); ?>


<?php 
if(!$this->request->is('ajax')){
    if(count($students)>0){
        echo $this->Html->link('Delete All',array('controller' => 'students', 'action' => 'deleteStudent')); 
    }else{ 
       echo $this->Html->link('Add Record',array('controller' => 'students', 'action' => 'addStudent')); 
    }  
}
?>

<!-- ADD SOME OPTIONS TO CAKEPHP PAGINATOR OBJECT-->
<?php 
  $this->Paginator->options(array(
    'update'=>'#data_table', //*** ELEMENT WITH ID #data_table WILL BE UPDATED
    'before'=>$this->Js->get('#loader')->effect('fadeIn'), //*** DISPLAY ELEMENT WITH ID #loader BEFORE JQUERY EXECUTED
    'after' =>$this->Js->get('#loader')->effect('fadeOut') //*** HIDE ELEMENT WITH ID #loader BEFORE JQUERY EXECUTED
    ));
  
?>

<div id="data_table"> 
<div id ="loader" style="display: none;">Loading</div>  

<table cellspacing="0" cellpadding="0">
    <?php
        //*** TABLE HEADER'S
        $tableHeaders = $this->Html->tableHeaders(array(
            $this->Paginator->sort('id'),
            $this->Paginator->sort('code'),
            $this->Paginator->sort('first_name'),
            $this->Paginator->sort('last_name'),
            $this->Paginator->sort('middle_name')
        ));
        
        //*** DISPLAY TABLE HEADER'S
        echo $tableHeaders;
        
        //*** TABLE ROW'S
        $rows =array();
        
        foreach ($students as $student){
            $rows[] = array(
                $student['Student']['id'],
                $student['Student']['code'],
                $student['Student']['first_name'],
                $student['Student']['last_name'],
                $student['Student']['middle_name']
            );
            
           
        }
        //*** DISPLAY TABLE ROW'S
        echo $this->Html->tableCells($rows);
    ?>
    
</table>
<div id="paging_div">
    <?php 
        //*** PAGINATION NUMBER'S
        echo $this->Paginator->numbers();
    
    ?>
</div>
</div>

<?php 
//*** IMPORTANT FOR JQUERY PAGINATION
echo $this->Js->writeBuffer();

?>

And that's it. You can play around in that code to understand how piece of code  in that sample executed.
By the way I going to explain some code we used above.

1.) echo $this->Html->script('jquery',FALSE)
      * This code load our  jquery library to the head of the page.
         Don't forget to write this code.

2). $this->Js->get('#loader')->effect('fadeIn') 
      * This code is just get element with id loader in the page and give effect of fadeIn. 
         In short just fade in the element. 

3). echo $this->Js->writeBuffer();
     * This code write the javascript that been generated by Cake. So, without this pagination might behave as          normal pagination. What I mean in normal is, pagination will work but it will reload the page.

4) $this->Paginator->options.
     * update 
          Element to be updated after ajax request.
     * before
          Code executed before ajax request sent.
     * after
           Code executed after ajax request sent.

Download Source Code

Have a nice coding coders...