Tutorial Membuat pagination Bootstrap 4 ajax CodeIgniter

Pada kesempatan ini saya akan memberi tutorial cara membuat pagination dengan ajax codeIgniter dengan Bootstrap 4.
Pagination sendiri merupakan page or halaman yang membuat tampilan situs lebih user friendly, untuk menampilkan data dalam beberapa halaman.

Ok langsung saja, karena kita akan menampilkan data dengan pagination maka kita perlu data yang ada di databse, saya sudah persiapkan sama seperti data yang diberikan di tutorial datatable server side di postingan :
membuat datatable server side ajax CodeIgniter Bootstrap 4

Biasa silahkan konfigurasi dasar codeIgniter nya seperti base_url, route, autoload, library, dan lain-lain.
konfigurasi dasar CodeIgniter 

Setelah konfigurasi semua selesai bisa kita buat modelnya terlebih dahulu, saya buat nama dengan mdata.php dengan code sebagai berikut :

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

class Mdata extends CI_Model {
 
 

 public function count_all($table)
 { 

  $query = $this->db->get($table); 
  return $query->num_rows();
 }
 

     public function pagenation($table,$limit,$offset) 
 {
  $this->db->select("*");
  $this->db->from($table);  
  $this->db->limit($limit,$offset);  
  $query = $this->db->get();
  return $query->result();
 }



}

Ok setelah membuat model, kita lansung buat file controllernya,  dimana terdapat dua function yaitu function page pertama untuk menampilkan dan kedua function pagedata untuk proses pagination ajax,
ok berikut code dari controller dengan dua function sebagai berikut :

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

class Home extends CI_Controller {

 function __construct()
 {
    parent::__construct();
    $this->load->library('pdf');
 }


      public function page()
      {
          //passing data function onload javascript
          $isi['onload'] = 'onload="load_data(1)"';
          $isi['title'] = "Pagination";              
          $this->load->view('full',$isi);
          
      }

      public function pagedata()
      {
        $config = array();
        $config["base_url"] = base_url()."home/page/";
        $config["total_rows"] = $this->mdata->count_all('tbmhs');
        $config["per_page"] = 3;
        $config["uri_segment"] = 3;
        $config['attributes'] = array('class' => 'page-link');
        $config["use_page_numbers"] = TRUE;        
        $config["full_tag_open"] = '<ul class="pagination">';
        $config["full_tag_close"] = '</ul>';
        $config["first_tag_open"] = '<li class="page-item">';
        $config["first_tag_close"] = '</li>';
        $config["last_tag_open"]  = '<li class="page-item">';
        $config["last_tag_close"] = '</li>';
        $config['next_link'] = 'Next';
        $config["next_tag_open"] = '<li class="page-item">' ;
        $config["next_tag_close"] = '</li>';
        $config['prev_link'] = 'Previous';
        $config["prev_tag_open"] = '<li>';
        $config["prev_tag_close"] = '</li>';
        $config["cur_tag_open"] = '<li class="page-item active"><a class="page-link" href="#">';
        $config['cur_tag_close'] = '</a></li>';
        $config['num_tag_open'] = '<li>';
        $config['num_tag_close'] = '</li>';
        //$config['display_pages'] = FALSE;
        $config["last_link"] = "Last";
        $config["first_link"] = "First";
        $config['num_links'] =2;

        $this->pagination->initialize($config);
        $page = $this->uri->segment(3);
        $start = ($page -1) * $config["per_page"];

        $data = array();
        $ambil = $this->mdata->pagenation('tbmhs',$config["per_page"], $start);
        foreach ($ambil as $row) {
          $sub_array = array();  
          $sub_array = '
          <div class="p-2">
          <div class="card">
          <div class="card-header">'.$row->nim.'</div>
          <div class="card-body">'.$row->nama.'</div>          
          </div>
        </div>';       
          $data[] = $sub_array;  
        }

        $output = array (
          'list_link' => $this->pagination->create_links(),
          'list_nama' => $data
        );

        echo json_encode($output);

      }


}

dan untuk tampilan di code view dengan nama full.php yaitu sebagai berikut :

  <!doctype html>
<html lang="en">
  <head>
    <title><?php echo $title;?></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet"> 
      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css"/> 
    <noscript>
    <style>html{display:none;}</style>
    Sorry, your browser does not support JavaScript!
    </noscript>

  </head>
  
  <body <?php if(isset($onload)) {echo $onload;}?>>


    <nav class="navbar navbar-expand-sm bg-light mb-5">  
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/content">Data</a></li>
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/summer">WYSIWYG Summernote</a></li>    
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/page">Pagination</a></li>     
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/crop">Cropper</a></li> 
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/label">Label</a></li>            
    </ul>
</nav>

  <div class="container">
  <div class="float-right" id="pagination_link"></div>
<div class="d-flex" id="content">
</div>
</div>
  <!-- Javascripts-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>  
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>      
    <script src="<?php echo base_url();?>asset/bootbox.min.js"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
    <script src="<?php echo base_url();?>asset/custom.js"></script> 
  
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>  
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>  
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>  
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
  </body>
</html>

Dan untuk code terakhir yaitu code file js yaitu dengan nama custom.js
yaitu sebagai berikut :

 
 function load_data(page)
 {
  $.ajax({
   url:"pagedata/"+page,
   method:"GET",
   dataType:"json",
   success:function(data)
   {
    $("#content").html(data.list_nama);
    $("#pagination_link").html(data.list_link);
   }
  });
 }
 

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

Silahkan coba di run jika done maka akan tampil sebagai berikut :

Tutorial Membuat pagination Bootstrap 4 ajax CodeIgniter

Untuk file demo Tutorial Membuat pagination Bootstrap 4 ajax CodeIgniter
dan file download Tutorial Membuat pagination Bootstrap 4 ajax CodeIgniter
demo video

Jika ada pertanyaan silahkan tinggalkan di kolom komentar.
trima kasih sudah berkunjung
happy coding.

pass : fahmiffa.blogspot.com

Share