Thursday, 16 March 2017

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>


18 comments:

  1. Hello! Thank you for the tutorial.

    You may want to add this at the very begin
    https://gist.github.com/adhipg/1600028

    it is the Sql dump of all the Countries, Country Codes, Phone codes.

    ReplyDelete
  2. hello i try using your code the same way you have use it, it's not working, it's showing some kind of error on the console area. it's not even getting the values from the database

    ReplyDelete
  3. Hi,it is a good article and thank you very much, it help me,but i had only one question , my link into the pagination don't work when i verify it the link
    this code return undifined var page = $(this).data("ci-pagination-page");i think it s the only problem,can you help me;thanks

    ReplyDelete
  4. hi, i got problem . i successed to fetch data but the return just
    [{"kd_prodi":"111","prodi":"tek","singkat":"k","ketua_prodi":"k","nik":"k","akreditasi":"k","foto":"akur
    .JPG"},{"kd_prodi":"124","prodi":"8","singkat":"8","ketua_prodi":"8","nik":"8","akreditasi":"8","foto"
    :"1.JPG"},{"kd_prodi":"12","prodi":"8","singkat":"8","ketua_prodi":"8","nik":"8","akreditasi":"8","foto"
    :"1.JPG"},{"kd_prodi":"1323","prodi":"k","singkat":"k","ketua_prodi":"0","nik":"k","akreditasi":"kj"
    ,"foto":"1.JPG"},{"kd_prodi":"78919","prodi":"Teknik kapals","singkat":"TKs","ketua_prodi":"aks","nik"
    :"8899990","akreditasi":"A+++","foto":"7075192122827.jpg"},{"kd_prodi":"555","prodi":"555","singkat"
    :"555","ketua_prodi":"55","nik":"55","akreditasi":"55","foto":"113415.jpg"},{"kd_prodi":"1111","prodi"
    :"kkk","singkat":"","ketua_prodi":"","nik":"","akreditasi":"","foto":"productlist.JPG"},{"kd_prodi":"22233"
    ,"prodi":"as","singkat":"axs","ketua_prodi":"as","nik":"89","akreditasi":"a++","foto":"446456.jpg"},
    {"kd_prodi":"887777","prodi":"l","singkat":"l","ketua_prodi":"l","nik":"99","akreditasi":"l","foto":""
    },{"kd_prodi":"32111","prodi":"jkjk","singkat":"k","ketua_prodi":"kj","nik":"889","akreditasi":"k","foto"
    :"1.JPG"},{"kd_prodi":"3211155","prodi":"jkjk","singkat":"k","ketua_prodi":"kj","nik":"889","akreditasi"
    :"k","foto":"1.JPG"},{"kd_prodi":"32111556","prodi":"jkjk","singkat":"k","ketua_prodi":"kj","nik":"889"
    ,"akreditasi":"k","foto":"1.JPG"},{"kd_prodi":"321115565","prodi":"jkjk","singkat":"k","ketua_prodi"
    :"kj","nik":"889","akreditasi":"k","foto":"1.JPG"},{"kd_prodi":"32115565","prodi":"jkjk","singkat":"k"
    ,"ketua_prodi":"kj","nik":"889","akreditasi":"k","foto":"1.JPG"}]


    how fix this? please

    ReplyDelete
  5. Hi thanks for these code

    i am using these above code for using pagination using ajax jquery in codeigniter.I have implemented these code in my project.It is working fine according to functionality.I am facing one issue related to pagination number activation display.

    I am not able to activate display color for current number page link whenever i click on that particular num link.

    Please provide helpful solution.

    Thanks in advance.

    ReplyDelete
  6. I do the same intro but it not working

    ReplyDelete
  7. active class is not changing for active page. It's always remaining on the 1st page. Please help.

    ReplyDelete
  8. Thank you so much for this tutorial. You helped me a lot

    ReplyDelete
  9. nice work ...
    عمل جيد

    ReplyDelete
  10. the result didn't show up after I change the database to my own database. (not recommended site)

    ReplyDelete
  11. https://drive.google.com/file/d/1AX8yA7iAvGGZ92dVyYn2BwHctadTnCtT/view?usp=sharing

    it is not working

    ReplyDelete
  12. i think this is the best tutorial for beginners!

    ReplyDelete