Untuk penanganan data dalam jumlah kecil, penggunaan datatables client side di rasa cukup dan tidak akan terlihat loading yang lambat. Tetapi untuk jumlah data yang besar hal ini akan sangat terasa ketika halaman di load pertama kali. Solusi dari permasalahan ini adalah penggunaan datatables server side, karena pemrosesan dilakukan di sisi server dan tidak semua data akan di load.
Kali ini kita akan membuat datatables dengan metode server side untuk penanganan data yang besar. Kita akan menggunakan database yang sudah pernah kita gunakan pada artikel-artikel sebelumnya atau dapat di download pada menu download pilih database daerah.sql
Langsung saja untuk membuat datatables server side sebagai berikut:
Membuat model
Buat model dengan nama Serverside_model.php, kemudian ketikkan script dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Serverside_model extends CI_Model { function __construct() { parent::__construct(); } var $column_order = array(null, 'kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama', 'provinsi.nama'); var $column_search = array('kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama', 'provinsi.nama'); var $order = array('id_kel' => 'asc'); private function _get_datatables_query() { $this->db->select('kelurahan.nama AS nm_kel, kecamatan.nama AS nm_kec, kabupaten.nama AS nm_kab, provinsi.nama AS nm_prov'); $this->db->from('kelurahan'); $this->db->join('kecamatan', 'kelurahan.id_kec = kecamatan.id_kec', 'left'); $this->db->join('kabupaten', 'kecamatan.id_kab = kabupaten.id_kab', 'left'); $this->db->join('provinsi', 'kabupaten.id_prov = provinsi.id_prov', 'left'); $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(); } public function count_filtered() { $this->_get_datatables_query(); $query = $this->db->get(); return $query->num_rows(); } public function count_all() { $this->db->from('kelurahan'); return $this->db->count_all_results(); } } |
Membuat controller
Buat controller dengan nama Serverside.php, kemudian ketikkan script dibawah:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Serverside extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('Serverside_model', 'Serverside'); } public function index() { $this->load->view('serverside'); } public function listdata() { $list = $this->Serverside->get_datatables(); $data = array(); $no = $_POST['start']; if (isset($_POST['start']) && isset($_POST['draw'])) { $no = $_POST['start']; } else { die(); }; foreach ($list as $dt) { $no++; $row = array(); $row[] = $no; $row[] = $dt->nm_kel; $row[] = $dt->nm_kec; $row[] = $dt->nm_kab; $row[] = $dt->nm_prov; $data[] = $row; } $output = array( "draw" => $_POST['draw'], "recordsTotal" => $this->Serverside->count_all(), "recordsFiltered" => $this->Serverside->count_filtered(), "data" => $data, ); echo json_encode($output); } } |
Membuat view
Buat view dengan nama serverside.php, kemudian ketikkan script dibawah:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html> <head> <title>Codeigniter - Datatables Server Side</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- Datatables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> Datatables Server Side </div> <div class="card-body"> <div class="responsive"> <table id="list_data" class="table display row-border table-striped compact" style="width: 100%;"> <thead> <tr> <th>No</th> <th>Kelurahan</th> <th>Kecamatan</th> <th>Kabupaten</th> <th>Provinsi</th> </tr> </thead> </table> </div> </div> </div> </div> </div> <script type="text/javascript"> var dataTable_; $(document).ready(function() { dataTable_ = $('#list_data').DataTable({ processing: true, serverSide: true, searching: true, info: true, paging: true, lengthChange: true, ordering: true, ajax: { url: '<?php echo base_url('serverside/listdata'); ?>', type: "POST" }, }); }) </script> </body> </html> |
Jika langkah-langkah di atas sudah sesuai maka akan didapatkan hasil seperti berikut ini
Tampilan datatables server side
Nah, demikian bahasan kita kali ini tentang datatables server side. Jika ada yang kurang jelas silahkan isi kolom komentar. Terimakasih.
mas saya masih bingung pemberian nama file php kok ada 2 yang namanya sama jadi salah satu saya beri nama lain
mohon pencerahan trims Kera Ngalam
yang satu sebagai controller, satu lagi sebagai view. Bokeh aja diganti nama filenya, yang penting pemanggilan controller atau view disesuaikan dengan nama filenya
yang barusan komen
di kolom search data, jika ketik sesuatu muncul pesan ini Gan.
DataTables warning: table id=list_data – Ajax error. For more information about this error, please see http://datatables.net/tn/7
Biasanya ada field tabel yang salah pemanggilan. Coba inspect element kemudian lihat pada tab network, nanti dapat di lihat errornya dimana.
iya gan.. load datanya juga sangat lama. apakah harus perbaiki struktur rabelnya kali ya?
‘asc’);
private function _get_datatables_query()
{
$this->db->select(‘a.id, a.nik, a.nama_perangkat as perangkat, a.tgl_lahir, a.jk, a.pendidikan, a.jabatan, a.sk, a.tgl_diangkat, a.tgl_akhir, a.nomor_hp, a.email, a.agama, b.nama as provinsi, c.nama as kabupaten, d.nama as kecamatan, e.nama as desa’);
$this->db->from(‘tbl_perangkat_desa as a’);
$this->db->join(‘wilayah_provinsi as b’, ‘a.provinsi_id = b.id’);
$this->db->join(‘wilayah_kabupaten as c’, ‘a.kabupaten_id = c.id’);
$this->db->join(‘wilayah_kecamatan as d’, ‘a.kecamatan_id = d.id’);
$this->db->join(‘wilayah_desa as e’, ‘a.desa_id = e.id’);
$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’])) {
$order_column = $this->column_order[$_POST[‘order’][‘0’][‘column’]];
$order_dir = $_POST[‘order’][‘0’][‘dir’];
$this->db->order_by($order_column, $order_dir);
} else {
$order_column = key($this->order);
$order_dir = $this->order[key($this->order)];
$this->db->order_by($order_column, $order_dir);
}
}
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();
}
public function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}
public function count_all()
{
$this->db->from(‘tbl_perangkat_desa’);
return $this->db->count_all_results();
}
}
‘asc’);
var $column_order = array(‘id’, ‘provinsi’, ‘kabupaten’, ‘kecamatan’, ‘desa’, ‘nik’, ‘perangkat’, ‘tgl_lahir’, ‘jk’, ‘pendidikan’, ‘jabatan’, ‘sk’, ‘tgl_diangkat’, ‘tgl_akhir’, ‘nomor_hp’, ’email’, ‘agama’);
var $column_search = array(‘id’, ‘provinsi’, ‘kabupaten’, ‘kecamatan’, ‘desa’, ‘nik’, ‘perangkat’, ‘tgl_lahir’, ‘jk’, ‘pendidikan’, ‘jabatan’, ‘sk’, ‘tgl_diangkat’, ‘tgl_akhir’, ‘nomor_hp’, ’email’, ‘agama’);
var $order = array(‘id’ => ‘asc’);
statusnya tertulis pending gan
berikut modelnya gan
‘asc’);
private function _get_datatables_query()
{
$this->db->select(‘a.id, a.nik, a.nama_perangkat as perangkat, a.tgl_lahir, a.jk, a.pendidikan, a.jabatan, a.sk, a.tgl_diangkat, a.tgl_akhir, a.nomor_hp, a.email, a.agama, b.nama as provinsi, c.nama as kabupaten, d.nama as kecamatan, e.nama as desa’);
$this->db->from(‘tbl_perangkat_desa as a’);
$this->db->join(‘wilayah_provinsi as b’, ‘a.provinsi_id = b.id’);
$this->db->join(‘wilayah_kabupaten as c’, ‘a.kabupaten_id = c.id’);
$this->db->join(‘wilayah_kecamatan as d’, ‘a.kecamatan_id = d.id’);
$this->db->join(‘wilayah_desa as e’, ‘a.desa_id = e.id’);
$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’])) {
$order_column = $this->column_order[$_POST[‘order’][‘0’][‘column’]];
$order_dir = $_POST[‘order’][‘0’][‘dir’];
$this->db->order_by($order_column, $order_dir);
} else {
$order_column = key($this->order);
$order_dir = $this->order[key($this->order)];
$this->db->order_by($order_column, $order_dir);
}
}
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();
}
public function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}
public function count_all()
{
$this->db->from(‘tbl_perangkat_desa’);
return $this->db->count_all_results();
}
}
/* End of file ModelName.php */