Ajax JQuery Pagination in Codeigniter using Bootstrap

Hi, In this post we have describe how to make Pagination in Codeigniter by using Codeigniter Pagination library with Jquery Ajax and Bootstrap. Because Codeigniter has rich pagination library by default. We have try many times to implement Codeigniter Pagination library with Jquery Ajax. But we have not get success. After We have try in Codeigniter 3.0 Framework after long time we have again try and we have get success to implement Codeigniter Pagination library with Ajax JQuery and Bootstrap and make pagination in Codeigniter by using Ajax JQuery with Bootstrap.

First we have make Ajax_pagination.php controller in Controllers folder and then after we have make index function and in that function we have load ajax_pagination.php view file from views folder. In that file we will display Codeigniter pagination.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Ajax_pagination extends CI_Controller {
 
 function index()
 {
  $this->load->view("ajax_pagination");
 }

After then in view file we have define two division tag, in on division tag we will display pagination link which are made by Codeigniter pagination library and in second tag we will display mysql table data in html format.

<div align="right" id="pagination_link"></div>
<div class="table-responsive" id="country_table"></div>

Then after we have write Jquery code for fetch data with pagination link from Ajax_pagination.php controllers, so we have make one simple load_country_data(page) function. In this function we have send request to controllers function for fetch particular page data with pagination link by using Ajax request. In Ajax request we have use GET method and json data type. This function will fetch data and pagination links from controllers and display on define division tag on webpage without refreshing of page. We have called this function with page argument value is equal to one. So when page has been load this function will be called and it display data and pagination on web page.

<script>
$(document).ready(function(){

 function load_country_data(page)
 {
  $.ajax({
   url:"<?php echo base_url(); ?>ajax_pagination/pagination/"+page,
   method:"GET",
   dataType:"json",
   success:function(data)
   {
    $('#country_table').html(data.country_table);
    $('#pagination_link').html(data.pagination_link);
   }
  });
 }
 
 load_country_data(1);

});
</script>

After creating JQuery function we have move to write pagination function in Ajax_pagination.php controllers. Under this function we have load Codeigniter pagination library. For initialize pagination library first we have define required configuration for initialize pagination library. In Codeigniter pagination library configuration we have define total rows which we have fetch from model count all() function, how many data should be display per page, We have use Bootstrap framework for pagination so we have define pagination class under full_tag_open configuration. Then after we have define html tag for different open and close tag in pagination configuration. After defining all configuration we have initialize pagination library in this function.

For create pagination link we have use pagination library create_links() method. This method has make pagination link. After making pagination link we want particular page data, so we have get that data from ajax_pagination_model 's fetch_details() function, this function will return particular page data. After making pagination link and page data now we want send this data to ajax request in json format, so we have use json_encode() function which convert php array to json string.

function pagination()
 {
  $this->load->model("ajax_pagination_model");
  $this->load->library("pagination");
  $config = array();
  $config["base_url"] = "#";
  $config["total_rows"] = $this->ajax_pagination_model->count_all();
  $config["per_page"] = 10;
  $config["uri_segment"] = 3;
  $config["use_page_numbers"] = TRUE;
  $config["full_tag_open"] = '<ul class="pagination">';
  $config["full_tag_close"] = '</ul>';
  $config["first_tag_open"] = '<li>';
  $config["first_tag_close"] = '</li>';
  $config["last_tag_open"] = '<li>';
  $config["last_tag_close"] = '</li>';
  $config['next_link'] = '&gt;';
  $config["next_tag_open"] = '<li>';
  $config["next_tag_close"] = '</li>';
  $config["prev_link"] = "&lt;";
  $config["prev_tag_open"] = "<li>";
  $config["prev_tag_close"] = "</li>";
  $config["cur_tag_open"] = "<li class='active'><a href='#'>";
  $config["cur_tag_close"] = "</a></li>";
  $config["num_tag_open"] = "<li>";
  $config["num_tag_close"] = "</li>";
  $config["num_links"] = 1;
  $this->pagination->initialize($config);
  $page = $this->uri->segment(3);
  $start = ($page - 1) * $config["per_page"];

  $output = array(
   'pagination_link'  => $this->pagination->create_links(),
   'country_table'   => $this->ajax_pagination_model->fetch_details($config["per_page"], $start)
  );
  echo json_encode($output);
 }

Now we have make one Ajax_pagination_model.php model in models folder, this will perform role as back end, which fetch data from mysql table and send to controllers. Here we have make two function. First function return the number of rows in table and second function fetch data for particular table and return that data in html table format to controllers.

<?php
class Ajax_pagination_model extends CI_Model
{
 function count_all()
 {
  $query = $this->db->get("countries");
  return $query->num_rows();
 }

 function fetch_details($limit, $start)
 {
  $output = '';
  $this->db->select("*");
  $this->db->from("countries");
  $this->db->order_by("name", "ASC");
  $this->db->limit($limit, $start);
  $query = $this->db->get();
  $output .= '
  <table class="table table-bordered">
   <tr>
    <th>Country ID</th>
    <th>Country Name</th>
   </tr>
  ';
  foreach($query->result() as $row)
  {
   $output .= '
   <tr>
    <td>'.$row->id.'</td>
    <td>'.$row->name.'</td>
   </tr>
   ';
  }
  $output .= '</table>';
  return $output;
 }
}

So when we have load page so it display data and pagination link also but when have click on link it is not working so we have write some jquery code on .pagination li a as selector on click event. So when we have click on pagination link then this code will be execute. When this code execute then it will get page number from data variable like ci-pagination-page on pagination link anchor tag. Based on this data variable we can get page number of particular pagination link. This data variable has been come in Codeigniter 3.0. So After coming this version we can easily implement Ajax JQuery pagination in Codeigniter. So we can get page number and after getting page number we have called load_country_data(page) function, so this function will fetch data of particular page and display on web page.

<script>
$(document).ready(function(){

 $(document).on("click", ".pagination li a", function(event){
  event.preventDefault();
  var page = $(this).data("ci-pagination-page");
  load_country_data(page);
 });

});
</script>

So this way we have make Pagination in Codeigniter by using JQuery Ajax with Bootstrap. We hope you have understand this tutorial. If you have any query regarding this tutorial, please comment your query in comment box.

Source Code

Controllers - Ajax_pagination.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Ajax_pagination extends CI_Controller {
 
 function index()
 {
  $this->load->view("ajax_pagination");
 }

 function pagination()
 {
  $this->load->model("ajax_pagination_model");
  $this->load->library("pagination");
  $config = array();
  $config["base_url"] = "#";
  $config["total_rows"] = $this->ajax_pagination_model->count_all();
  $config["per_page"] = 10;
  $config["uri_segment"] = 3;
  $config["use_page_numbers"] = TRUE;
  $config["full_tag_open"] = '<ul class="pagination">';
  $config["full_tag_close"] = '</ul>';
  $config["first_tag_open"] = '<li>';
  $config["first_tag_close"] = '</li>';
  $config["last_tag_open"] = '<li>';
  $config["last_tag_close"] = '</li>';
  $config['next_link'] = '&gt;';
  $config["next_tag_open"] = '<li>';
  $config["next_tag_close"] = '</li>';
  $config["prev_link"] = "&lt;";
  $config["prev_tag_open"] = "<li>";
  $config["prev_tag_close"] = "</li>";
  $config["cur_tag_open"] = "<li class='active'><a href='#'>";
  $config["cur_tag_close"] = "</a></li>";
  $config["num_tag_open"] = "<li>";
  $config["num_tag_close"] = "</li>";
  $config["num_links"] = 1;
  $this->pagination->initialize($config);
  $page = $this->uri->segment(3);
  $start = ($page - 1) * $config["per_page"];

  $output = array(
   'pagination_link'  => $this->pagination->create_links(),
   'country_table'   => $this->ajax_pagination_model->fetch_details($config["per_page"], $start)
  );
  echo json_encode($output);
 }
 
}

Models - Ajax_pagination_model.php

<?php
class Ajax_pagination_model extends CI_Model
{
 function count_all()
 {
  $query = $this->db->get("countries");
  return $query->num_rows();
 }

 function fetch_details($limit, $start)
 {
  $output = '';
  $this->db->select("*");
  $this->db->from("countries");
  $this->db->order_by("name", "ASC");
  $this->db->limit($limit, $start);
  $query = $this->db->get();
  $output .= '
  <table class="table table-bordered">
   <tr>
    <th>Country ID</th>
    <th>Country Name</th>
   </tr>
  ';
  foreach($query->result() as $row)
  {
   $output .= '
   <tr>
    <td>'.$row->id.'</td>
    <td>'.$row->name.'</td>
   </tr>
   ';
  }
  $output .= '</table>';
  return $output;
 }
}

Views - ajax_pagination.php

<html>
<head>
    <title>Ajax JQuery Pagination in Codeigniter using Bootstrap</title>
    
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
</head>
<body>
 <div class="container box">
  <h3 align="center">Ajax JQuery Pagination in Codeigniter using Bootstrap</h3>
  <div align="right" id="pagination_link"></div>
  <div class="table-responsive" id="country_table"></div>
 </div>
</body>
</html>
<script>
$(document).ready(function(){

 function load_country_data(page)
 {
  $.ajax({
   url:"<?php echo base_url(); ?>ajax_pagination/pagination/"+page,
   method:"GET",
   dataType:"json",
   success:function(data)
   {
    $('#country_table').html(data.country_table);
    $('#pagination_link').html(data.pagination_link);
   }
  });
 }
 
 load_country_data(1);

 $(document).on("click", ".pagination li a", function(event){
  event.preventDefault();
  var page = $(this).data("ci-pagination-page");
  load_country_data(page);
 });

});
</script>