membuat pagination dan filter dengan datatables ajax di codeigniter 3

Membuat Pagination dan Filter dengan DataTables Ajax di CodeIgniter 3

Leave a Comment / Codeigniter / By

Dalam tutorial ini, saya menunjukkan bagaimana Anda dapat menambahkan pagination dan filter pencarian khusus dan mendapatkan record menggunakan DataTables di CodeIgniter 3.

DataTables secara default dilengkapi dengan filter pencarian yang dapat digunakan untuk mencari di semua bidang atau bidang tertentu dan menampilkan rekaman. Terkadang, perlu menambahkan filter untuk bidang tertentu saja seperti – menambahkan filter rentang tanggal, filter negara, dll. DataTables memungkinkan untuk meneruskan data yang dapat dibaca di server-side script.

Langkah 1: Membuat Database

Langkah yang pertama kita lakukan adalah membuat database. Disini saya akan membuat database dengan nama tutorial. Kemudian jalankan query berikut untuk membuat table users.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL,
  `username` varchar(80) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `email` varchar(80) NOT NULL,
  `city` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Query diatas akan membuat 6 field diantaranya id, name, username, gender, email, dan city.

Baca Juga

Cara Menggunakan Summernote Di Codeigniter

Langkah 2: Configuration

Langkah selanjutnya kita akan mengatur configuration pada CodeIgniter. Kita bisa membuka application/config/database.php dan mendefinisikan database yang baru saja kita buat agar dapat terkoneksi dengan CodeIgniter.

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root', // Username
 'password' => '', // Password
 'database' => 'tutorial', // Database name
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);

Disini yang perlu Anda ubah jika menggunakan localhost yaitu username, password, dan database. Untuk yang lainnya dibiarkan default aja.

Sekarang kita akan mengatur routes untuk mengerah ke Controller Users. Caranya bagaimana? Pertama kita perlu membuka file application/config/routes.php dan ubah value dari default_controller menjadi Users.

$route['default_controller'] = 'Users';

Terakhir untuk bagian configurationnya yaitu memanggil library database di application/config/autoload.php. Tujuannya yaitu untuk mengakses mysql database. Anda bisa menambahkannya seperti berikut.

$autoload['libraries'] = array("database");

Langkah 3: Membuat Model

Selanjutnya kita perlu membuat Model dengan nama User_model.php di folder application/models/. Pada model tersebut kita akan membuat 2 method yaitu getUsers dan getCities.

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

class User_model extends CI_Model {

   // Get DataTable data
   function getUsers($postData=null){

     $response = array();

     ## Read value
     $draw = $postData['draw'];
     $start = $postData['start'];
     $rowperpage = $postData['length']; // Rows display per page
     $columnIndex = $postData['order'][0]['column']; // Column index
     $columnName = $postData['columns'][$columnIndex]['data']; // Column name
     $columnSortOrder = $postData['order'][0]['dir']; // asc or desc
     $searchValue = $postData['search']['value']; // Search value

     // Custom search filter 
     $searchCity = $postData['searchCity'];
     $searchGender = $postData['searchGender'];
     $searchName = $postData['searchName'];

     ## Search 
     $search_arr = array();
     $searchQuery = "";
     if($searchValue != ''){
        $search_arr[] = " (name like '%".$searchValue."%' or 
         email like '%".$searchValue."%' or 
         city like'%".$searchValue."%' ) ";
     }
     if($searchCity != ''){
        $search_arr[] = " city='".$searchCity."' ";
     }
     if($searchGender != ''){
        $search_arr[] = " gender='".$searchGender."' ";
     }
     if($searchName != ''){
        $search_arr[] = " name like '%".$searchName."%' ";
     }
     if(count($search_arr) > 0){
        $searchQuery = implode(" and ",$search_arr);
     }

     ## Total number of records without filtering
     $this->db->select('count(*) as allcount');
     $records = $this->db->get('users')->result();
     $totalRecords = $records[0]->allcount;

     ## Total number of record with filtering
     $this->db->select('count(*) as allcount');
     if($searchQuery != '')
     $this->db->where($searchQuery);
     $records = $this->db->get('users')->result();
     $totalRecordwithFilter = $records[0]->allcount;

     ## Fetch records
     $this->db->select('*');
     if($searchQuery != '')
     $this->db->where($searchQuery);
     $this->db->order_by($columnName, $columnSortOrder);
     $this->db->limit($rowperpage, $start);
     $records = $this->db->get('users')->result();

     $data = array();

     foreach($records as $record ){

       $data[] = array( 
         "username"=>$record->username,
         "name"=>$record->name,
         "email"=>$record->email,
         "gender"=>$record->gender,
         "city"=>$record->city
       ); 
     }

     ## Response
     $response = array(
       "draw" => intval($draw),
       "iTotalRecords" => $totalRecords,
       "iTotalDisplayRecords" => $totalRecordwithFilter,
       "aaData" => $data
     );

     return $response; 
   }

   // Get cities array
   public function getCities(){

     ## Fetch records
     $this->db->distinct();
     $this->db->select('city');
     $this->db->order_by('city','asc');
     $records = $this->db->get('users')->result();

     $data = array();

     foreach($records as $record ){
        $data[] = $record->city;
     }

     return $data;
   }

}

getUsers()

Metode ini mengambil parameter tunggal dan digunakan untuk mengembalikan data DataTable yang telah diformat.

Baca parameter POST DataTable dan tetapkan dalam variabel.

Di sini, baca nilai filter khusus POST sebagaimana ditentukan dalam data saat menambahkan dalam JavaScript.

Buat variabel $search_arr Array untuk menetapkan permintaan pencarian jika nilai pencarian tersedia.

Implode $search_arr Array dan tetapkan ke $searchQuery jika tidak kosong.

Hitung total rekaman dengan dan tanpa filter. Ambil rekaman dengan meneruskan $searchQuery dalam klausa WHERE, ORDER BY, dan LIMIT.

Ulangi rekaman yang diambil dan inisialisasi $data Array dengan Array asosiatif yang memiliki kunci serupa seperti yang didefinisikan dalam opsi columns dalam metode dataTable() .

Inisialisasi $response Array dengan tombol draw, iTotalRecords, iTotalDisplayRecords, dan aaData.

Mengembalikan $response Array.

getCities()

Method ini bertujuan untuk mendapatkan daftar kota dan memasukkannya ke dalam $data Array, lalu return $data.

Langkah 4: Membuat Controller

Langkah selanjutnya yaitu membuat controller di application/controller. Disini kita akan membuat controller Users.php

Ada 3 method yang akan kita buat di Users.php antara lain:

  • __construct() – Untuk load url helper dan User_model
  • index() – Untuk mendapatkan list cities dengan memanggil method getCities() dan memasukkan ke dalam variable $cities. Load user_view dengan mengirikam $data.
  • userList() – Untuk menghandle DataTable Ajax request. Memasukkan POST data ke dalam variable $postData.

Mengirimkan $postData ke method $getUsers() untuk mendapat list user dan mengembalikan response dalam format JSON.

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

class Users extends CI_Controller {

   public function __construct(){

      parent::__construct();
      $this->load->helper('url');

      // Load model
      $this->load->model('User_model');

   }

   public function index(){

      $cities = $this->User_model->getCities();

      $data['cities'] = $cities;

      // load view
      $this->load->view('user_view',$data);

   }

   public function userList(){

      // POST data
      $postData = $this->input->post();

      // Get data
      $data = $this->User_model->getUsers($postData);

      echo json_encode($data);
   }

}

Baca Juga

Cara Membuat Form Login Di Codeigniter 3

Langkah 5: Membuat View

Terakhir kita akan membuat file user_view.php di folder application/views. Pertama kita buat struktur html sederhanya yang terdiri tag head dan body.

Untuk tag head kita akan memanggil library Datatable dan JQuery melalui CDN. Sedangkan untuk tag body kita akan membuat filter dan tabel users.

Kita buat tag script untuk inisiasi DataTable pada #userTable selector dan memasukkan ke dalam variable userDataTable. Kirim permintaan AJAX ke base_url()?>index.php/Users/userList dan dengan opsi data baca nilai bidang pencarian khusus – #sel_city, #sel_gender, #searchName dan tambahkan di objek data.

Di kolom opsi, tentukan nama key yang dibaca pada panggilan balik yang berhasil. Tentukan event perubahan pada elemen #sel_city, #sel_gender, dan keyup pada elemen #searchName. Panggil userDataTable.draw() untuk menggambar ulang DataTable.

<!DOCTYPE html>
<html>
  <head>
    <title>DataTables AJAX pagination with Custom filter in CodeIgniter 3</title>

    <!-- Datatable CSS -->
    <link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

    <!-- jQuery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

  </head>
  <body>

    <!-- Search filter -->
    <div>
      <!-- City -->
      <select id='sel_city'>
        <option value=''>-- Select city --</option>
        <?php 
        foreach($cities as $city){
          echo "<option value='".$city."'>".$city."</option>";
        }
        ?>
      </select>

      <!-- Gender -->
      <select id='sel_gender'>
        <option value=''>-- Select Gender --</option>
        <option value='male'>Male</option>
        <option value='female'>Female</option>
      </select>

      <!-- Name -->
      <input type="text" id="searchName" placeholder="Search Name">
    </div>

    <!-- Table -->
    <table id='userTable' class='display dataTable'>

      <thead>
        <tr>
          <th>Username</th>
          <th>Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>City</th>
        </tr>
      </thead>

    </table>

    <!-- Script -->
    <script type="text/javascript">
    $(document).ready(function(){

       var userDataTable = $('#userTable').DataTable({
         'processing': true,
         'serverSide': true,
         'serverMethod': 'post',
         //'searching': false, // Remove default Search Control
         'ajax': {
            'url':'<?=base_url()?>index.php/Users/userList',
            'data': function(data){
               data.searchCity = $('#sel_city').val();
               data.searchGender = $('#sel_gender').val();
               data.searchName = $('#searchName').val();
            }
         },
         'columns': [
            { data: 'username' },
            { data: 'name' },
            { data: 'email' },
            { data: 'gender' },
            { data: 'city' },
         ]
       });

       $('#sel_city,#sel_gender').change(function(){
          userDataTable.draw();
       });
       $('#searchName').keyup(function(){
          userDataTable.draw();
       });
    });
    </script>
  </body>
</html>

Dengan mengikuti tutorial diatas, Anda dapat menambahkan lebih banyak elemen filter pencarian di pagination DataTable pad CodeIgniter 3. Untuk ini, Anda perlu mengikat sebuah event dan memanggil draw() pada objek DataTable.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top