Ajax JQuery Pagination in Codeigniter using Bootstrap

Hai, Pada postingan kali ini kami telah menjelaskan cara membuat Pagination di Codeigniter menggunakan library Codeigniter Pagination dengan Jquery Ajax dan Bootstrap. Karena Codeigniter memiliki perpustakaan pagination yang kaya secara default. Kami telah mencoba berkali-kali mengimplementasikan pustaka Codeigniter Pagination dengan Jquery Ajax. Namun kita belum mendapatkan kesuksesan. Setelah kami mencoba di Framework Codeigniter 3.0 setelah sekian lama kami mencoba lagi dan kami berhasil mengimplementasikan pustaka Codeigniter Pagination dengan Ajax JQuery dan Bootstrap dan membuat pagination di Codeigniter dengan menggunakan Ajax JQuery dengan Bootstrap.

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);
 }
 
}

<?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'] = '>';

$config["next_tag_open"] = '<li>';

$config["next_tag_close"] = '</li>';

$config["prev_link"] = "<";

$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;
 }
}

<?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 .= '

<tr>

<th>Country ID</th>

<th>Country Name</th>

</tr>

foreach($query->result() as $row)

{

$output .= '

<tr>

</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>

<html>

<head>

<title>Ajax JQuery Pagination in Codeigniter using Bootstrap</title>

</head>

<body>

<h3 align="center">Ajax JQuery Pagination in Codeigniter using Bootstrap</h3>

</div>

</body>

</html>

$(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>

Dibaca: 4,749

Baca Juga

Rekomendasi untuk kamu