Menampilkan Data Besar Dengan Menggunakan Datatables Serverside

Pada tutorial kali ini saya akan memberikan materi tutorial tentang Menampilkan Data Besar Dengan Menggunakan Datatables Serverside, sebelum kita membuat kita kita harus tahu dahulu mengapa kita membutuhkan datatabels untuk menampilkan data yang sngat besar.

Datatables serverside adalah datatables yang di khususkan untuk menload data yang sangat besar , besar disini adalah mulai dari data puluhan ribu sampai ratusan ribu bahkan jutaaan recoed. jika kita menggunjakan PHP biasa untuk looping data sebanyak itu maka akan sangat lama sekali bahkankalu komputer yang di pakai tidak memiliki spek yang tinggi bisa megakibatkan komputer crash.

Nah untuk memenuhi kebutuhan tersebut datanglah yang namanya datatabels untuk melakukan tugas tersbut, yang mana datatables serverside menggunakan AJAX untuk request ke server dan menampilkan tperhalaman sesuai yang di butuhkan saja jadi tidak semua data langsung di load.

OKe langsung saja kita membuatnya:

Catatan : Saya asumsikan anda telah memiliki tabel provinsi yang sebelumnya digunakan dalam ajax datatable. (anda bisa mendownloadnya di akhir artikel ini)

1. Untuk membuat datatabels bertipe serverside kita memrlukan yang namanya file serverside processing yaitu ssp.class.php, bisa di download di bawah nanti
   .
2. Buat file index.php :
   
   <!doctype html> <html> <head> <title>Harviacode - Datatables</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/dataTables.bootstrap.css"/> <style> .dataTables_wrapper .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 100%; height: 40px; margin-left: -50%; margin-top: -25px; padding-top: 20px; text-align: center; font-size: 1.2em; color:grey; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> Serverside Datatables - Harviacode <div class="btn-group pull-right"> <a href="#">Add</a> </div> </div> <!-- /.panel-heading --> <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover" id="provinsi"> <thead> <tr> <th>Id Provinsi</th> <th>Nama Provinsi</th> </tr> </thead> </table> </div> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> </div> <script src="js/jquery-1.11.0.js"></script> <script src="js/bootstrap.min.js"></script> <script src="datatables/jquery.dataTables.js"></script> <script src="datatables/dataTables.bootstrap.js"></script> <script> $(document).ready(function () { var t = $('#provinsi').DataTable({ "processing": true, "serverSide": true, "ajax": 'ajax/provinsi.php', "columns": [ {"data": "id_provinsi"}, {"data": "provinsi"} ], "order": [[1, 'asc']] }); }); </script> </body> </html>

   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

   <!doctype html> <html>     <head>         <title>Harviacode - Datatables</title>         <link rel="stylesheet" href="css/bootstrap.min.css"/>         <link rel="stylesheet" href="css/dataTables.bootstrap.css"/>         <style>             .dataTables_wrapper .dataTables_processing {                 position: absolute;                 top: 50%;                 left: 50%;                 width: 100%;                 height: 40px;                 margin-left: -50%;                 margin-top: -25px;                 padding-top: 20px;                 text-align: center;                 font-size: 1.2em;                 color:grey;             }         </style>     </head>     <body>         <div class="container">             <div class="row">                 <div class="col-lg-12">                     <div class="panel panel-default">                         <div class="panel-heading">                             Serverside Datatables - Harviacode                             <div class="btn-group pull-right">                                 <a href="#">Add</a>                             </div>                         </div>                         <!-- /.panel-heading -->                         <div class="panel-body">                             <div class="table-responsive">                                 <table class="table table-striped table-bordered table-hover" id="provinsi">                                     <thead>                                         <tr>                                             <th>Id Provinsi</th>                                             <th>Nama Provinsi</th>                                         </tr>                                     </thead>                                 </table>                             </div>                         </div>                         <!-- /.panel-body -->                     </div>                     <!-- /.panel -->                 </div>                 <!-- /.col-lg-12 -->             </div>         </div>         <script src="js/jquery-1.11.0.js"></script>         <script src="js/bootstrap.min.js"></script>         <script src="datatables/jquery.dataTables.js"></script>         <script src="datatables/dataTables.bootstrap.js"></script>         <script>             $(document).ready(function () {                 var t = $('#provinsi').DataTable({                     "processing": true,                     "serverSide": true,                     "ajax": 'ajax/provinsi.php',                     "columns": [                         {"data": "id_provinsi"},                         {"data": "provinsi"}                     ],                     "order": [[1, 'asc']]                 });             });         </script>     </body> </html>

   
   3. Buatlah file ajax bernama provinsi.php dengan kode sebagai berikut. File ini berfungsi menangani permintaan data secara serverside. Anda harus menincludekan file ssp.class.php dalam file ini.pada file ini juga harus di buat koneksi ke database
   
   <?php if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { require 'ssp.class.php'; // nama table $table = 'provinsi'; // Table's primary key $primaryKey = 'id_provinsi'; // Array of database columns which should be read and sent back to DataTables. // The `db` parameter represents the column name in the database, while the `dt` // parameter represents the DataTables column identifier. In this case simple // indexes $columns = array( array('db' => 'id_provinsi', 'dt' => 'id_provinsi'), array('db' => 'provinsi', 'dt' => 'provinsi') ); // SQL server connection information $sql_details = array( 'user' => 'root', 'pass' => '', 'db' => 'harviacode', 'host' => 'localhost' ); echo json_encode( SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns) ); } else { echo '<script>window.location="404.html"</script>'; } ?>

   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

   <?php if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) {          require 'ssp.class.php';          // nama table     $table = 'provinsi';     // Table's primary key     $primaryKey = 'id_provinsi';     // Array of database columns which should be read and sent back to DataTables.     // The `db` parameter represents the column name in the database, while the `dt`     // parameter represents the DataTables column identifier. In this case simple     // indexes     $columns = array(         array('db' => 'id_provinsi', 'dt' => 'id_provinsi'),         array('db' => 'provinsi', 'dt' => 'provinsi')     );     // SQL server connection information     $sql_details = array(         'user' => 'root',         'pass' => '',         'db' => 'harviacode',         'host' => 'localhost'     );     echo json_encode(             SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns)     ); } else {     echo '<script>window.location="404.html"</script>'; } ?>

   
    

   Sudah selesai , jalankan file index.php lalu lihat hasilnya.
   Untuk file bisa anda download pada LINK INI   , baiklah itu saja untuk kali ini tentang tutorial Menampilkan Data Besar Dengan Menggunakan Datatables Serverside.