by 
DataTables
DataTables adalah sbuah plugin yang sangat memudahkan para programmer untuk membuat sebuah halaman web yang akan menampilkan data dengan fitur search, sort, paginatioan, dan berapa jumlah data yang akan ditampilkan.
DataTables memiliki dua mode dasar operasi:
DataTables Client-Side
Pemrosesan sisi klien atau client-side – tempat pemfilteran, paging, dan penghitungan pengurutan semuanya dilakukan di sisi client atau browser web.
DataTables Server-Side
Pemrosesan sisi server atau server-side – tempat pemfilteran, paging, dan penghitungan pengurutan semuanya dilakukan di sisi server atau oleh server.
Secara default, DataTables beroperasi dalam mode client-side, tetapi dapat dialihkan ke mode server-side. Pemrosesan server-side sangat berguna saat bekerja dengan kumpulan data besar (biasanya >50.000 records).
Saat beroperasi dalam mode server-side, DataTables akan mengirimkan parameter ke server untuk memberitahukan data apa yang dibutuhkannya (halaman apa, filter apa yang diterapkan, dll), kemudian server akan mengirimkan data yang diperlukan untuk ditampilkan di sisi client atau browser web. Protokol komunikasi klien-server yang digunakan DataTables dirinci dalam dokumentasi DataTables.
Oke kita masuk ke-pembahasan.
DataTables Server-side dengan CodeIgniter
Jika anda mencari/membaca tutorial ini saya yakin bahwa anda telah paham untuk konfigurasi dasar Coddeigniter, sehingga saya tidak akan membahasnya lagi disini dan cukup hanya memberikan potongan-potongan codenya saja.
Tapi jangan khuatir, saya tetap sediakan link download full source code diakhir aktikel.
1. Struktur Tabel, dalam hal ini saya menggunakan nama tabel “tbl_mahasiswa”
CREATE TABLE `tbl_mahasiswa` ( `ID` int(11) NOT NULL, `nama_lengkap` varchar(100) NOT NULL, `tempat_lahir` varchar(75) NOT NULL, `tanggal_lahir` date NOT NULL, `jenis_kelamin` varchar(1) DEFAULT NULL, `agama` varchar(30) DEFAULT 'ISLAM', `alamat` varchar(200) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Controller Mahasiswa (controllers/Mahasiswa.php)
Class Mahasiswa extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->model(array('mahasiswa_model'=>'mhs_mod'));
}
public function index()
{
$this->load->view('mahasiswa');
}
public function data_ajax()
{
$list = $this->mhs_mod->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $record) {
$no++;
$row = array();
$row[] = $no;
$row[] = $record->nama_lengkap;
$tgl_lahir = date('d F Y',strtotime($record->tanggal_lahir));
$row[] = $record->tempat_lahir.', '.$tgl_lahir;
$row[] = $record->jenis_kelamin;
$row[] = $record->agama;
$row[] = $record->alamat;
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->mhs_mod->count_all(),
"recordsFiltered" => $this->mhs_mod->count_filtered(),
"data" => $data,
);
echo json_encode($output);
}
}
3. Model Mahasiswa (models/Mahasiswa_model.php)
Class Mahasiswa_model extends CI_model{
var $table = 'tbl_mahasiswa';
var $column_order = array(null,'nama_lengkap','jenis_kelamin','tempat_lahir','agama','alamat');
var $column_search = array('nik', 'nim','nama_lengkap','email');
var $order = array('ID' => 'desc');
private function _get_datatables_query()
{
$this->db->from($this->table);
$i = 0;
foreach ($this->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($this->column_search) - 1 == $i)
$this->db->group_end();
}
$i++;
}
if(isset($_POST['order']))
{
$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else if(isset($this->order))
{
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}
function get_datatables()
{
$this->_get_datatables_query();
if($_POST['length'] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
}
function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}
public function count_all()
{
$this->db->from($this->table);
return $this->db->count_all_results();
}
}
4. View (views/mahasiswa.php)
<div class="card"> <div class="card-header"> <h3 class="card-title">Data Mahasiswa</h3> </div> <!-- /.card-header --> <div class="card-body"> <table id="tblMahasiswa" class="table table-striped table-sm"> <thead> <tr> <th width="5%">#</th> <th>Nama Lengkap</th> <th>TTL</th> <th class="text-center">JK</th> <th>Agama</th> <th>Alamat</th> </tr> </thead> </table> </div> <!-- /.card-body --> </div>
5. jQuery Ajax untuk menampilkan data kedalam tabel.
$(document).ready(function() {
$('#tblMahasiswa').DataTable({
destroy: true,
processing: true,
language: {
processing: "<i class=\"fas fa-spinner fa-pulse fa-3x\"></i>"
},
serverSide: true,
order: [],
ajax: {
url: "<?php echo base_url('mahasiswa/data_ajax')?>",
type: "POST"
},
columnDefs: [
{ targets: [ 0 ], "orderable": false, "className": "text-center" }
],
});
$('.dataTables_processing').removeClass('card');
});
Demikian artikel DataTables Server-side dengan CodeIgniter 3 (Sort + Search + Pagination) ini, semoga artikel ini bisa membatu anda yang sedang mencari tutorial terkait DataTables Server-side dengan CodeIgniter.
Download source code lengkapnya disini, atau melalui tombol download dibawah!
