Datatables merupakan plugin jquery yang berguna untuk menampilkan
data dalam bentuk tabel. Datatables memiliki beberapa fitur seperti pagination,
searching, shorting, export data yang memudahkan kita dalam membangun sebuah
aplikasi.
Adakalanya dalam sebuah sistem yang kita buat terdapat ribuan sampai jutaan data yang akan kita tampilkan, sehingga proses untuk membaca dan menampilkan data kedalam tabel terasa berat dan membutuhkan waktu yang lama. Datatables menyediakan fitur server side processing untuk mengoleh data disisi server sebelum ditampilkan disisi client. Semua proses pagination, searching, shorting akan di kerjakan di sisi server kemudian dikembalikan di sisi client menggunakan ajax dengan data yang diperlukan saja.
Tutorial kali ini kita kan membuat sebuah program sederhana untuk menerapkan datatables server side processing pada Codeigniter 3
Membuat database
Pertama kita buat database mysql dan satu tabel untuk menyimpan data yang akan kita tampilkan pada datatables. Buat database bernama akademik dan satu tabel mahasiswa.
CREATE DATABASE `akademik`;
USE `akademik`;
CREATE TABLE `mahasiswa` (
`IdMhsw` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(150),
`Alamat` text,
`Email` varchar(150)
);
Konfigurasi Codeigniter
Buat aplikasi ci dengan nama datatables_ci, buka config/database.php, isikan seperti dibawah ini:
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'akademik',
'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
);
Buka config/config.php, ubah base url dan index page seperti dibawah ini:
$config['base_url'] = 'http://localhost:/datatables_ci/';
$config['index_page'] = '';
Buka config/autoload.php, cari libraries dan helper kemudian isikan seperti ini.
$autoload['libraries'] = array('database', 'session');
$autoload['drivers'] = array('url');
Buka config/routes.php, Ubah default controler menjadi seperti ini:
$route['default_controller'] = 'mahasiswa';
Kode diatas digunakan untuk mengatur controller pertama kali saat aplikasi dijalankan. Nanti kita akan membuat sebuah file controller baru dengan nama Mahasiswa.php dalam folder controllers.
Setting .htaccess, Buat file baru pada folder datatables_ci, kopikan script dibawah ini kemudian simpan dengan nama .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Buat model Data_mahasiswa_model.php dalam folder application/models. Model disini digunakan untuk menampilkan data mahasiswa, dengan cara ini data akan ditampilkan seperlunya saja. Jika kita berpindah halaman, melakukan pencarian maupun order data, aplikasi akan melakukan request ajax kembali. Nama model diawali degan huruf kapital.
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Data_mahasiswa_model extends CI_Model
{
//set nama tabel yang akan kita tampilkan datanya
var $table = 'mahasiswa';
//set kolom order, kolom pertama saya null untuk kolom edit dan hapus
var $column_order = array(null, 'Nama', 'Alamat', 'Email');
var $column_search = array('Nama', 'Alamat', 'Email');
// default order
var $order = array('IdMhsw' => 'asc');
public function __construct()
{
parent::__construct();
$this->load->database();
}
private function _get_datatables_query()
{
$this->db->from($this->table);
$i = 0;
foreach ($this->column_search as $item) // loop kolom
{
if ($this->input->post('search')['value']) // jika datatable mengirim POST untuk search
{
if ($i === 0) // looping pertama
{
$this->db->group_start();
$this->db->like($item, $this->input->post('search')['value']);
} else {
$this->db->or_like($item, $this->input->post('search')['value']);
}
if (count($this->column_search) - 1 == $i) //looping terakhir
$this->db->group_end();
}
$i++;
}
// jika datatable mengirim POST untuk order
if ($this->input->post('order')) {
$this->db->order_by($this->column_order[$this->input->post('order')['0']['column']], $this->input->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 ($this->input->post('length') != -1)
$this->db->limit($this->input->post('length'), $this->input->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();
}
}
Buat controller Mahasiswa.php dalam folder application/controllers. Controller mahasiswa digunakan untuk menghubungkan view dengan model. Nama controller diawali degan huruf kapital.
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Mahasiswa extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model("Data_mahasiswa_model"); //load model data mahasiswa
}
//method pertama yang akan di eksekusi
public function index()
{
$data["title"] = "List Data Mahasiswa";
$this->load->view('mahasiswa_view', $data);
}
//method yang digunakan untuk request data mahasiswa
public function ajax_list()
{
header('Content-Type: application/json');
$list = $this->Data_mahasiswa_model->get_datatables();
$data = array();
$no = $this->input->post('start');
//looping data mahasiswa
foreach ($list as $Data_mahasiswa) {
$no++;
$row = array();
//row pertama akan kita gunakan untuk btn edit dan delete
$row[] = '<a class="btn btn-success btn-sm"><i class="fa fa-edit"></i> </a>
<a class="btn btn-danger btn-sm "><i class="fa fa-trash"></i> </a>';
$row[] = $Data_mahasiswa->Nama;
$row[] = $Data_mahasiswa->Alamat;
$row[] = $Data_mahasiswa->Email;
$data[] = $row;
}
$output = array(
"draw" => $this->input->post('draw'),
"recordsTotal" => $this->Data_mahasiswa_model->count_all(),
"recordsFiltered" => $this->Data_mahasiswa_model->count_filtered(),
"data" => $data,
);
//output to json format
$this->output->set_output(json_encode($output));
}
//method insert_dummy digunakan untuk membuat data dummy mahasiswa
public function insert_dummy()
{
//3ribu mahasiswa
$jumlah_data = 3000;
for ($i = 1; $i <= $jumlah_data; $i++) {
$data = array(
"Nama" => "Mahasiswa ke" . $i,
"Alamat" => "Alamat mahasiswa ke" . $i,
"Email" => "mahasiswa$i@gmil.com"
);
//insert ke tabel mahasiswa
$this->db->insert('mahasiswa', $data);
}
//flashdata untuk pesan success
$this->session->set_flashdata('message', '<div class="alert alert-success alert-dismissible fade show" role="alert">
' . $jumlah_data . ' Data Mahasiswa berhasil disimpan.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button></div>');
redirect("mahasiswa");
}
}
Terakhir kita buat mahasiswa_view.php dalam folder application/views. View mahasiswa digunakan untuk menampilkan data mahasiswa.
<!DOCTYPE html>
<html lang="en">
<head>
<title><?= $title ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4.5.2-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Fontawesome 5.15.3-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Datatables CI</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= base_url('mahasiswa'); ?>">Mahasiswa</a>
</li>
</ul>
</div>
</nav>
<div class="container pt-5">
<h3><?= $title ?></h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a>Mahasiswa</a></li>
<li class="breadcrumb-item active" aria-current="page">List Data</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12">
<a class="btn btn-primary mb-2" href="<?= base_url('mahasiswa/insert_dummy'); ?>">Buat Data Dummy</a>
<div mb-2>
<!-- Menampilkan flashh data (pesan saat data berhasil disimpan)-->
<?php if ($this->session->flashdata('message')) :
echo $this->session->flashdata('message');
endif; ?>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="tableMahasiswa">
<thead>
<tr class="table-success">
<th></th>
<th>NAMA</th>
<th>ALAMAT</th>
<th>EMAIL</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//setting datatables
$('#tableMahasiswa').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Indonesian.json"
},
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
//panggil method ajax list dengan ajax
"url": 'mahasiswa/ajax_list',
"type": "POST"
}
});
</script>
</body>
</html>