Artikel

Tutorial pagination server side (Ajax) pada DataTable

    Dibaca 34061 kali Javascript ajax codeigniter

Hai semuanya, selamat datang ditutorial pada kali ini.

 

 

Kali kita akan belajar cara menggunakan pagination menggunakan DataTable dan tentunya server side (Ajax).

 

 

Siapa sih yang gak kenal DataTable? Saat ini hampir semua aplikasi yang memiliki data data yang dimuat didalam table, pasti pada tablenya menggunakan DataTable.

 

 

Dengan DataTable, table akan lebih user friendly, rapi karena disediakan fitur fitur menarik seperti seach field dan pagination.

 


Lalu apa bedanya pagination client side dan server side?

 

 

Pada pagination client side, semua data akan muat terlebih dahulu oleh browser, dan setelah semua data telah dimuat, barulah dipisahkan per page.
Nah tidak masalah jika datanya hanya sedikit, tapi bagaimana jika datanya ada puluhan ribu atau jutaan?
Meload puluhan ribu data sekaligus bisa memakan waktu yang sangat lama bahkan menyebabkan browser not responding.

 

 

Untuk solusi masalah ini kita perlu melakukan pagination melalui server side, yang artinya data yang akan diload oleh browser hanyalah data pada page yang sedang aktif. Dengan begitu, beban browser akan lebih ringan, aplikasi lebih akan nyaman digunakan.

 

 

Dalam tutorial kita kali ini, kita akan menggunakan framework Codeigniter sebagai framework script server side. Untuk databasenya tentunya kita akan memerlukan sebuah contoh database yang lumayan besar, dan database yang akan kita gunakan adalah database desa/kelurahan se Indonesia. Total datanya adalah 81,935 baris.

 Database nya sudah saya sediakan sekalian pada full project yang bisa kamu download.

 

 

Silahkan ikuti tutorial berikut ini.

 

Persiapan

 

Silahkan download full projectnya
DOWNLOAD

 

 

1. Buat folder project baru bernama datatable 

 

 

2. Didalam folder tersebut, masukan semua file-file Codeigniter dan buat folder bernama assets.

 

 

3. Didalam folder assets, masukan semua file file bootstrap, datatable, dan jQuery.
(semua file sudah tersedia pada full project, silahkan didownload)

 

 

4. Pada Phpmyadmin , buat sebuah database baru bernama datatable.
Didalam database yang baru dibuat tersebut, import file villages.sql.
(file SQL tersebut juaga sudah tersedia pada full project)

 

 

5. Buka file config.php lalu atur base_url nya menjadi $config['base_url'] = 'http://localhost/datatable';

 

 

6. Buka file database.php lalu atur nama databasenya menggunakan nama database yang tadi kamu buat.

 

 

7. Buat file Table.php didalam folder application/controllers

 

 

8. Buat file table_view.php didalam folder application/views

 

 

Coding

 

 

Pada file Table.php, masukan code berikut ini. (codenya sudah termasuk penjelasannya)

 

class Table extends CI_Controller
{

	function __construct(){
		parent::__construct();
		$this->load->database();
		$this->load->helper('url');
	}

	function index(){
		$this->load->view("table_view");
	}


	function ambil_data(){


		/*Menagkap semua data yang dikirimkan oleh client*/

		/*Sebagai token yang yang dikrimkan oleh client, dan nantinya akan
		server kirimkan balik. Gunanya untuk memastikan bahwa user mengklik paging
		sesuai dengan urutan yang sebenarnya */
		$draw=$_REQUEST['draw'];

		/*Jumlah baris yang akan ditampilkan pada setiap page*/
		$length=$_REQUEST['length'];

		/*Offset yang akan digunakan untuk memberitahu database
		dari baris mana data yang harus ditampilkan untuk masing masing page
		*/
		$start=$_REQUEST['start'];

		/*Keyword yang diketikan oleh user pada field pencarian*/
		$search=$_REQUEST['search']["value"];


		/*Menghitung total desa didalam database*/
		$total=$this->db->count_all_results("villages");

		/*Mempersiapkan array tempat kita akan menampung semua data
		yang nantinya akan server kirimkan ke client*/
		$output=array();

		/*Token yang dikrimkan client, akan dikirim balik ke client*/
		$output['draw']=$draw;

		/*
		$output['recordsTotal'] adalah total data sebelum difilter
		$output['recordsFiltered'] adalah total data ketika difilter
		Biasanya kedua duanya bernilai sama, maka kita assignment 
		keduaduanya dengan nilai dari $total
		*/
		$output['recordsTotal']=$output['recordsFiltered']=$total;

		/*disini nantinya akan memuat data yang akan kita tampilkan 
		pada table client*/
		$output['data']=array();


		/*Jika $search mengandung nilai, berarti user sedang telah 
		memasukan keyword didalam filed pencarian*/
		if($search!=""){
		$this->db->like("name",$search);
		}


		/*Lanjutkan pencarian ke database*/
		$this->db->limit($length,$start);
		/*Urutkan dari alphabet paling terkahir*/
		$this->db->order_by('name','DESC');
		$query=$this->db->get('villages');


		/*Ketika dalam mode pencarian, berarti kita harus mengatur kembali nilai 
		dari 'recordsTotal' dan 'recordsFiltered' sesuai dengan jumlah baris
		yang mengandung keyword tertentu
		*/
		if($search!=""){
		$this->db->like("name",$search);
		$jum=$this->db->get('villages');
		$output['recordsTotal']=$output['recordsFiltered']=$jum->num_rows();
		}


		$nomor_urut=$start+1;
		foreach ($query->result_array() as $desa) {
			$output['data'][]=array($nomor_urut,$desa['name']);
		$nomor_urut++;
		}

		echo json_encode($output);


	}

}

 

 

Dan pada file table_view.php masukan code berikut ini

 

<!DOCTYPE html>
<html>
<head>
	<title>Latihan Datatable</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>">

<style type="text/css">

.container{
	margin-top: 50px;
}

</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-9">

<table class="table table-striped table-desa">
<thead>
<tr><th style="width:50px">No</th><th>Nama Desa/Kelurahan</th></tr>
</thead>
</table>

</div>
</div>
</div>



<script type="text/javascript" src="<?php echo base_url('assets/jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/media/js/jquery.dataTables.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/media/js/dataTables.bootstrap.min.js') ?>"></script>

<script type="text/javascript">

$(".table-desa").DataTable({
	ordering: false,
	processing: true,
	serverSide: true,
	ajax: {
	  url: "<?php echo base_url('index.php/table/ambil_data') ?>",
	  type:'POST',
	}
});

</script>


</body>
</html>

 

 

Buka browser kamu lalu open http://localhost/datatable/index.php/table

 

 

 

Dan berhasil! :D

Coba kamu klik tombol pagingnya dan juga coba masukan keyword pada field pencarian. Data yang dimuat hanyalah data page yang aktif. :)

 

 

Cukup sederhana kan? Simple and gak ribet. Untuk lebih memahami, silahkan kunjungi official documentasinya. Silahkan dipelajari  lebih lanjut.

Silahkan tinggalkan pesan anda pada comment box dibawah.
Jika ada kesalahan pada tutorial ini, mohon dikoreksi.


Silahkan download full projectnya

DOWNLOAD

 

 

Akhir kata, semoga tutorial ini bermanfaat :)