Cara Singkat Membuat DataTables ServerSide di CodeIgniter

Dari kalian semua pasti tidaklah asing lagi dengan library yang satu ini. Datatables merupakan library yang sangat berguna sekali bagi programer programer backend seperti saya ini.. :) karena dengan library ini kita tidak perlu susah-susah lagi membuat fitur-ditur seperti paging, sortir dan search data pada tabel. Membuat tabel dengan library dataTables secara biasa tentu sudah sering kalian lakukan. Namun berbeda caranya jika dilakukan secara ServerSide dan pada framework codeigniter.

Cara Menghilangkan index.php Pada Url Codeiniter

Contoh Login Sederhana dengan Codeigniter dan Bootstrap

Dalam artikel ini saya akan membagikan tutorial Cara Singkat Membuat DataTables ServerSide di CodeIgniter. Kenapa sih harus ServerSide? Serverside akan terlihat manfaatnya ketika data yang kita punya sangat banyak misalkan puluhan ribu atau ratusan ribu data. Karena dalam ServerSide data yang diambil dari database sesuai dengan range yang di tentukan, berbeda halnya dengan cara biasa yang mengambil semua data pada database. Tentunya ini akan dapat menghemat waktu pemrosesan data.

Baik langsung saja kita mulai prakteknya. Yang perlu di persiapkan dalam contoh artikel ini:

1. Library DataTables
2. library Jquery
3. Framework Bootstrap
4. Framework Codeigniter
5. Database (dalam contoh ini "db_data_ajax") dan siapkan satu tabel dengan nama "data_provinsi"

*Semua source dalam artikel ini, dapat kalian download pada akhir artikel.

Silahkan setting konfigurasi awal (sesuai kebutuhan) pada codeigniter anda seperti autoload.php, config.php,database.php dan routes.php

selanjutnya buat file :

Controller : dashboard.php
Model : m_dashboard.php
View : v_dashboard.php

Pertama mari kita buat controller "dashboard.php"

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
 class Dashboard extends CI_Controller{
  function __construct()
     {
      parent::__construct();
            $this->load->model('m_dashboard');
     }

     function index() {
      
      $this->load->view('v_dashboard');
     }

        function db_data_provinsi() {

            $list = $this->m_dashboard->datatables_getDataProvinsi();
            $data = array();
            $no = $_POST['start'];
            foreach ($list as $value) {
                $row = array();
                $row[] = $value['id_provinsi'];
                $row[] = $value['nama_provinsi'];
                $action = '<a style="color:white;" id="update_provinsi" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i> Update</a> <a style="color:white" id="delete_provinsi" class="btn btn-danger btn-xs"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>';

                $row[] = $action;
                $data[] = $row;
            }
            $output = array(
                            "draw" => $_POST['draw'],
                            "recordsTotal" => $this->m_dashboard->count_all_provinsi(),
                            "recordsFiltered" => $this->m_dashboard->count_filtered_provinsi(),
                            "data" => $data,
                    );
            echo json_encode($output);
        }
    }
?>

pada controller dashboard.php fungsi db_data_provinsi.php merupakan fungsi yang melakukan pengambilan data ke database dan mereturnkan data json.

Lanjut kita buat model "m_dashboard.php"

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class M_dashboard extends CI_Model
 {
  
  function __construct()
  {
   parent::__construct();
   
  }

  //fungsi untuk search dan filter datatables
  function query_datatables($column_order,$column_search,$def_order) {   
      $i = 0;
      foreach ($column_search as $item) {
          if($_POST['search']['value']) {
              if($i===0){
                  $this->db->group_start();
                  $this->db->like($item, $_POST['search']['value']);
              } else {
                  $this->db->or_like($item, $_POST['search']['value']);
              }

              if(count($column_search) - 1 == $i)
                  $this->db->group_end();
          }
          $i++;
      }
       
      if(isset($_POST['order'])) {
          $this->db->order_by($column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
      } else if (isset($order)) {
          $order = $def_order;
          $this->db->order_by(key($order), $order[key($order)]);
      }
  }

  function sql_provinsi(){
   $this->db->select("id_provinsi,nama_provinsi",false)
   ->from("data_provinsi");
  }
  
  function datatables_getDataProvinsi(){
   $column_order = array('id_provinsi','nama_provinsi');
      $column_search = array('id_provinsi','nama_provinsi');
      $def_order = array('id_provinsi' => 'asc');

   $this->sql_provinsi();
   $this->query_datatables($column_order,$column_search,$def_order);
         if($_POST['length'] != -1)
          $this->db->limit($_POST['length'], $_POST['start']);
         $query = $this->db->get();
         return $query->result_array();
  }
  
     function count_filtered_provinsi()
     {
      $column_order = array('id_provinsi','nama_provinsi');
      $column_search = array('id_provinsi','nama_provinsi');
      $def_order = array('id_provinsi' => 'asc');

      $this->sql_provinsi();
   $this->query_datatables($column_order,$column_search,$def_order);
         $query = $this->db->get();
         return $query->num_rows();
     }
  
     public function count_all_provinsi()
     {
      $this->sql_provinsi();
         return $this->db->count_all_results();
     }

 }
?>

Dalam model diatas ada beberapa fungsi yang dipanggil melalui controller dan juga di panggil oleh fungsi lain pada model.

Terakhir lanjut kita buat view "v_dashboard.php"
silahkan include kan semua css dan js pendukungnya

berikut script menampilkan tabel

<center>
<h4>
Data Provinsi</h4>
</center>
<div class="container">
        <table id="tabel_provinsi" class="table table-bordered table-hover">
            <thead>
<tr>
                    <th width="25%">ID</th>
                    <th width="50%">Nama Provinsi</th>
                    <th width="25%">Aksi</th>
                </tr>
</thead>
        </table>
</div>

berikut cara untuk memanggil jquery datatables secara serverside

$(document).ready(function(){

             oTable = $('#tabel_provinsi').DataTable({ 
 
                "processing": true,
                "serverSide": true,
                //"lengthChange": false,
                //"displayLength" : 20,
                "order": [],
                "autoWidth" : false,
                "ajax": {
                    "url": "<?=base_url()?>dashboard/db_data_provinsi/",
                    "type": "POST"
                },
    
                "columnDefs": [
                    { "targets": [ 0 ],"searchable": true, "sortable" : true },
                    { "targets": [ 1 ],"searchable": true, "sortable" : true },
                    { "targets": [ 2 ],"searchable": false, "sortable" : false }
                ],
         
            });
        });

"<?=base_url()?>dashboard/db_data_provinsi/" merupakan alamat untuk pemrosesan data setiap kali menampilkan data serta untuk filter, search dan sortir data pada tabel

silahkan simpan semua project anda, kemudian jalankan pada browser maka hasilnya kurang lebih seperti di bawah ini: