Mungkin postingan kali bukan untuk anda yang belum tahu sama sekali mengenai datatable namun posting kali ini buat anda yang sudah paling tidak mengenal dan mau mempelajari datatable lebih lanjut.
Sebagai developer tentu tidak asing dengan datatable, atau bahkan mungkin menjadi plugin jquery wajib untuk manage datagrid.
Datatable bisa ditampilkan dengan cara biasa dalam arti semua data di load di client atau dengan server side processing yakni data di fetch dari sisi server per halaman.
Keuntungan menggunakan metode server side processing datatable adalah ketika anda punya data yang ribuan. Jika menggunakan server side maka prosesnya tidak akan berat karena data memang diload sesuai jumlah yang di request client. Berbeda dengan tanpa server side, jika anda punya data ribuan, maka loading akan lama karena semua data langsung di fetch di client.
Kali ini saya akan share script php pdo server side script datatable untuk mempermudah pengambilan data dengan datatable pada sisi server side. Database yang akan saya gunakan adalah Mysql.
Kita akan buat strukturnya seperti ini
Langsung saja let get started
Library
Struktur yang akan kita buat adalah seperti ini
Untuk lengkapnya silakan download saja file finalnya.
Silakan anda buat database baru misalkan data, lalu importkan file data.sql
Kemudian edit config file sesuaikan nama database, username dan passwordnya.
config.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php ini_set( "display_errors", true ); define( "DB_DSN", "mysql:host=localhost;dbname=data" ); define( "DB_USERNAME", "root" ); define( "DB_PASSWORD", "" ); define('DB_CHARACSET', 'utf8'); require_once ('Database.php'); require_once ('Dtable.php'); $db=new Database(); $datatable=New Dtable(); function handleException( $exception ) { echo $exception->getMessage(); } set_exception_handler( 'handleException' ); ?> |
Index.php
|
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>PHP PDO Datatable server side script</title> <style type="text/css"> /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ margin-right:-4px; } </style> <!-- Bootstrap --> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Datatable css --> <link href="assets/css/jquery.dataTables.css" rel="stylesheet"> <link href="assets/css/dataTables.bootstrap.css" rel="stylesheet"> </head> <body> <!-- Page Content --> <div class="container"> <!-- Heading Row --> <div class="row row-centered"> <h1>PHP PDO Datatable server side script</h1> <div class="col-md-12"> <table id="contoh" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Provinsi</th> <th>Kabupaten</th> <th>Kecamatan</th> <th>Aksi</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> <p><a href="http://wildantea.com">Main BLog</a></p> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="assets/js/jquery-1.12.0.min.js"></script> <!-- datatables js --> <script src="assets/js/dataTables.bootstrap.min.js"></script> <script src="assets/js/jquery.dataTables.min.js"></script> <!-- let's begin the script --> <script type="text/javascript"> $("#contoh").dataTable({ 'bProcessing': true, 'bServerSide': true, //disable order dan searching pada tombol aksi "columnDefs": [ { "targets": [0,3], "orderable": false, "searchable": false } ], "ajax":{ url :"data.php", type: "post", // method , by default get //bisa kirim data ke server /*data: function ( d ) { d.jurusan = "3223"; },*/ error: function (xhr, error, thrown) { console.log(xhr); } }, }); </script> </body> </html> |
data.php
File ini untuk fetching data ke mysql
|
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 |
<?php session_start(); include "lib/config.php"; //kolom apa saja yang akan ditampilkan $columns = array( 'nama_prov', 'nama_kab', 'nama_kec', ); //lakukan query data dari 3 table dengan inner join $query = $datatable->get_custom("select provinsi.nama_prov,kabupaten.nama_kab, kecamatan.nama_kec,id_kec from provinsi inner join kabupaten on provinsi.id_prov=kabupaten.id_prov inner join kecamatan on kabupaten.id_kab=kecamatan.id_kab",$columns); //buat inisialisasi array data $data = array(); foreach ($query as $value) { //array sementara data $ResultData = array(); //masukan data ke array sesuai kolom table $ResultData[] = $value->nama_prov; $ResultData[] = $value->nama_kab; $ResultData[] = $value->nama_kec; //bisa juga pake logic misal jika value tertentu maka outputnya //kita bisa buat tombol untuk keperluan edit, delete, dll, $ResultData[] = "<a href='url_edit/".$value->id_kec."' class='btn btn-primary'>Edit</a> <a href='url_edit/".$value->id_kec."' class='btn btn-danger'>Hapus</a> <a href='url_edit/".$value->id_kec."' class='btn btn-primary'>tombol 3</a>"; //memasukan array ke variable $data $data[] = $ResultData; } //set data $datatable->set_data($data); //create our json $datatable->create_data(); |
Pada script data diatas, kita akan melakukan query untuk menampilkan data provinsi,kabupaten dan kecamatan. Jadi kita melakukan query join dari 3 table provinsi, kabupaten dan kecamatan.
Demikian tutorial cara load datatable dengan server side processing.
Keren mas wildan, saya baru bisa menggunakan Datatables versi Client Side, untuk serverside blm pernah coba karena blm ada kasus ane ngerjain data dlm jumlah besar, makasih shareny 🙂
mantap gan (Y)
ini dia yang di cari mangstap lagi lari ke ajax smua gan..
thanks berat gan. ijin copas ya
Nice stuff 😀
min, gimana kalau datanya dari 2 table atau lebih?
itukan contohnya lebih dari 3 table
min, klo pengen nampilin data dengan kategori tertentu itu di javascript nya kayak gmna ??
ga ngerti pas di sini :
“ajax”:{
url :”data.php”,
type: “post”, // method , by default get
//bisa kirim data ke server
/*data: function ( d ) {
d.jurusan = “3223”;
},*/
kenapa error ketika di hosting di internet ??
masa, salah link ajax mungkin
ia mas pas di hosting gak muncul datanya salah dimana ya….
url cek, inspect element lihat di console
bro ane upload di server kenapa tidak tampil ya datanya..?,, kalau di laptop dgn localhost lancar jaya..
cek lagi bro urlservernya
Bang kalo datanya kita mau pilih dari satu tabel saja gimana?
tinggal query ke satu table