Online Snippets Library

Ajax pagination in codeigniter

CodeIgniter is one of the most powerful frameworks for PHP developers.Codeigniter provides a simple pagination class.Here we use jquery code to create ajax pagination by default pagination class.

Example

We will use following step to create Ajax Pagination in CodeIgniter.

Step 1

First we create database and tables.

CREATE DATABASE ajax_pagination;
CREATE TABLE student(
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(50) DEFAULT NULL,
    `grade` char(20) DEFAULT NULL,
     PRIMARY KEY (`id`)
    );
 INSERT INTO `student`(`id`,`name`,`grade`) VALUES (NULL,'Manish','grade5');
 INSERT INTO `student`(`id`,`name`,`grade`) VALUES (NULL,'Pawan','grade5');
 INSERT INTO `student`(`id`,`name`,`grade`) VALUES (NULL,'Kripal','grade1');
 INSERT INTO `student`(`id`, `name`,`grade`) VALUES (NULL, 'Priya', 'grade2');
 INSERT INTO `student`(`id`, `name`,`grade`) VALUES (NULL, 'Payal', 'grade3');  
 INSERT INTO `student`(`id`,`name`,`grade`) VALUES (NULL,'Pradeep','grade4');
Step 2

Create view files inside application\views\cipagination.php .

<html>
<head>
<title>Codeigniter Ajax Pagination Example  </title>
</head>
<body>
<h3>Codeigniter Ajax Pagination Example  </h3>
<div class="row" id="ajaxdata">
<?php
foreach($results as $data) {
 echo $data->name . " - " . $data->grade . "<br>";
}
?>
<ul class="pagination" id="ajax_pagingsearc">
<p><?php echo $links; ?></p>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script type="text/javascript">
    $(function() {
      applyPagination();
   
      function applyPagination() {
        $("#ajax_pagingsearc a").click(function() {
        var url = $(this).attr("href");
    
          $.ajax({
            type: "POST",
            data: "ajax=1",
            url: url,
           success: function(msg) {
            
              $("#ajaxdata").html(msg);
              applyPagination();
            }
          });
        return false;
        });
      }
    });
</script>
</body>
</html>

Create view files inside application\views\ciajaxpagination.php .

<?php
foreach($results as $data) {
 echo $data->name . " - " . $data->grade . "<br>";
}
?>
<ul class="pagination" id="ajax_pagingsearc">
<p><?php echo $links; ?></p>
</ul>
Step 3

Create Controller file inside application/controllers/cipagination.php .

<?php
class cipagination extends CI_Controller{

  function __construct()
{
parent::__construct();
$this->load->model("cipaginationmodel");
$this->load->library("pagination");
}
public function example() {
        $config = array();
        $config["base_url"] = base_url() . "cipagination/example";
        $config["total_rows"] = $this->cipaginationmodel->record_count();
        $config["per_page"] = 2;
        $config["uri_segment"] = 3;
        $config['use_page_numbers'] = TRUE;
        $config['cur_tag_open'] = ' ';
        $config['cur_tag_close'] = '';
        $config['next_link'] = 'Next';
        $config['prev_link'] = 'Previous';
        $this->pagination->initialize($config);
        $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
        $data["results"] = $this->cipaginationmodel->fetch_employees($config["per_page"], $page);
        $data["links"] = $this->pagination->create_links();
        if($this->input->post('ajax')) {
         $this->load->view('ciajaxpagination',$data);
        } 
        else {
         $this->load->view('cipagination',$data);
       }
    }
}
?>
Step 4

Create Model files inside application/models/cipaginationmodel.php .

<?php
class cipaginationmodel extends CI_Model {
    function __construct()
    {
      parent::__construct();
    }
function record_count()
{
 return $this->db->count_all('student');
}
public function fetch_employees($limit, $start) {
        $this->db->limit($limit, $start);
        $query = $this->db->get("student");
        if ($query->num_rows() > 0) {
            foreach ($query->result() as $row) {
                $data[] = $row;
            }
            return $data;
        }
        return false;
   }

}
?>
Step 5

Now we have to visit the following Url in our web browser.

http://localhost/ci/cipagination/example/