Lanjut masih mengenai Datatable server side processing.
Kali ini saya merubah beberapa code pada php pdo datatable server side script nya. Dua postingan sebelumnya yakni PHP PDO Datatable Server Side Script dan PHP Ajax Chaining Datatable Server Side Processing memang belum ada fitur untuk secara default order column berdasarkan dari query yang di process di server.
Misalkan kita akan menampilkan data dari sebuah table. Secara default datatable akan melakukan ordering table berdasarkan column pertama atau index ke 0 dengan mode ASC atau ascending yakni berurut dari kecil ke besar atau dari a-z.
Untuk kodenya masih sama saya satukan dengan file – file tutorial datatable sebelumnya. Jadi tinggal pull aja jika temen – temen cloning data dari github saya. github.wildantea.com
Nah bagaimana caranya supaya kita bisa melakukan ordering datatable berdasarkan dari kolom table yang kita inginkan. Library datatable kali sudah saya tambahkan fitur untuk ordering berdasarkan kolom table. Jadi walaupun kolomnya tidak di tampilkan di client, kita masih bisa melakukan ordering sesuai kolom yang didefinisikan.
Kalau kita lihat di request network maka pada load pertama kali datatable berisi request sepert ini
Untuk melihat request di chrome, lakukan inspect dan masuk ke tab network, lalu klik kemana file request datatable
Pada gambar diatas terlihat order[0][column]:0 adan order[0][dir]: asc , artinya datatable request order kolom index ke 0 atau pertama dan dengan metode asc.
Kita akan defined order kolom secara default di server side. Order default akan berlaku ketika request pertama atau ketika paging halaman pertama di klik.
Let’s get started
Disini kita akan menampilkan hanya dari satu table saja, yakni table provinsi. Kemudian kita akan define order by primary key provinsi.id_prov desc. Jadi akan secara default akan diurutkan berdasarkan id_prov terbesar. Tentu hal ini sangat diperlukan ketika kasusnya menampilkan data berita misalkan. Jadi list paling atas yang tampil adalah berita paling terbaru. contoh kedua kita urutkan berdarkan nama provinsi secara descending pula.
Kita akan membuat 3 file
default_order_by.php
File utama untuk menampilkan table data
|
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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<?php //include config database include "lib/config.php";?> <!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 Processing Default Ordering Column </title> <!-- Bootstrap --> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Datatable css --> <link href="assets/css/dataTables.bootstrap.css" rel="stylesheet"> <!-- library chosen untuk merubah select biasa jadi searchable --> <link href="assets/css/chosen.css" rel="stylesheet"> </head> <body> <div id="loader" style="display:none"> <img src="assets/images/loadnya.gif" class="ajax-loader"/> </div> <!-- Page Content --> <div class="container"> <!-- Heading Row --> <div class="row row-centered"> <h1><a href="http://wildantea.com/chaining-datatable-server-side-processing/" target="_blank">PHP PDO Datatable Server Side Processing Default Ordering Column</a></h1> </div> <!-- Heading Row --> <div class="row"> <div class="col-md-6"> <h3>Order By default id provinsi secara descending </h3> Disini id provinsi ditampilkan untuk melihat ordering sudah sesuai apa belum. Namun, Anda tak perlu menampilkan id provinsi jika tidak diinginkan. <table id="contoh" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>NO</th> <th>Id Provinsi</th> <th>Provinsi</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="col-md-6"> <h3>Order By nama provinsi secara descending</h3> <table id="contoh2" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>NO</th> <th>Provinsi</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/jquery.dataTables.min.js"></script> <script src="assets/js/dataTables.bootstrap.min.js"></script> <!-- library select2 untuk merubah select biasa jadi searchable --> <script src="assets/js/chosen.jquery.min.js"></script> <!-- let's begin the script --> <script type="text/javascript"> //simpan datatable ke variable dataTable, var dataTable = $("#contoh").dataTable({ 'bProcessing': true, 'bServerSide': true, "deferRender": true, 'columnDefs': [ { //set width kolom nomor dan disable ordering 'width': '5%', 'targets': 0, 'orderable': false, 'searchable': false, 'className': 'dt-center' } ], "ajax":{ url :"order_by_data_1.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); } }, }); //untuk contoh kedua var dataTable = $("#contoh2").dataTable({ 'bProcessing': true, 'bServerSide': true, "deferRender": true, 'columnDefs': [ { //set width kolom nomor dan disable ordering 'width': '5%', 'targets': 0, 'orderable': false, 'searchable': false, 'className': 'dt-center' } ], "ajax":{ url :"order_by_data_2.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> |
order_by_data_1.php
Pada file ini akan dilakukan ordering berdasarkan id provinsi secara descending dari besar ke kecil
|
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 |
<?php session_start(); include "lib/config.php"; //kolom apa saja yang akan ditampilkan $columns = array( 'id_prov', 'nama_prov', //primary key 'id_prov', ); //set status bahwa table ini menambahkan penomoran di kolom pertama $datatable->set_numbering_status(1); //order by berdasarkan id_prov $datatable->set_order_by("provinsi.id_prov"); //order secara descending $datatable->set_order_type("desc"); //lakukan query data dari 3 table dengan inner join $query = $datatable->get_custom("select * from provinsi",$columns); //buat inisialisasi array data $data = array(); $i=1; foreach ($query as $value) { //array sementara data $ResultData = array(); //set kolom pertama sebagai nomor //panggih method $numbering dengan parameter variable $i diatas $ResultData[] = $datatable->number($i); //show id prov $ResultData[] = $value->id_prov; //masukan data ke array sesuai kolom table $ResultData[] = $value->nama_prov; //memasukan array ke variable $data $data[] = $ResultData; $i++; } //set data $datatable->set_data($data); //create our json $datatable->create_data(); |
order_by_data_2.php
Pada ini melakukan ordering berdasarkan nama provinsi secara descending
|
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 |
<?php session_start(); include "lib/config.php"; //kolom apa saja yang akan ditampilkan $columns = array( 'nama_prov', //primary key 'id_prov', ); //set status bahwa table ini menambahkan penomoran di kolom pertama $datatable->set_numbering_status(1); //order by berdasarkan id_prov $datatable->set_order_by("provinsi.nama_prov"); //order secara descending $datatable->set_order_type("desc"); //lakukan query data dari 3 table dengan inner join $query = $datatable->get_custom("select * from provinsi",$columns); //buat inisialisasi array data $data = array(); $i=1; foreach ($query as $value) { //array sementara data $ResultData = array(); //set kolom pertama sebagai nomor //panggih method $numbering dengan parameter variable $i diatas $ResultData[] = $datatable->number($i); //masukan data ke array sesuai kolom table $ResultData[] = $value->nama_prov; //memasukan array ke variable $data $data[] = $ResultData; $i++; } //set data $datatable->set_data($data); //create our json $datatable->create_data(); |
Sekian untuk tutorial datatable kali ini. Semoga Bermanfaat.
Wassalam
Mas mau tanya dong, kira-kira tau caranya date range filtering untuk datatable yang serverside gak ya? soalnya saya car2 di google dapet cuman buat java, sedangkan buat PHP nya belum ada. Terima kasih.
tinggal buat query filter aja, lihat contoh di chain.php. Konsepnya sama mengirim post request ke server side. nah tinggal ganti post request nya jadi tanggal date rangenya.
terdapat error saat submit ke feeder dikti sbb:
1. Error Tidak bisa menambah/mengubah data. id_reg_pd mahasiswa di luar satuan pendidikan pengguna web service.
diharapkan pencerahannya.
lihat di tanya.wildantea.com mas
Trims atas tutorialnya bro.
Btw, nanya dunk bro, bagaimana script php untuk melakukan menampilkan data otomatis berdasarkan select value? Contohnya seperti di sini:
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_database
Gampang aja, di sisi phpnya tinggal ambil value yg dikirim ajax, lalu echokan data yg diinginkan.