Sudah lama juga saya tidak update artikel di blog ini, harap di maklum karena saya sibuk mengerjakan project - project, oke pada kesempatan kali ini saya akan membahas tentang datatables serverside bootstrap dan memberikan tutorial singkat serta akan saya berikan link download source code nya agar anda bisa paham dan bisa langsung mempraktekannya. Pada dasarnya data tables serverside digunakan untuk meload data puluhan ribu record dari server dengan cepat tanpa lola alias loading lama, nah tentunya
bagi anda yang memiliki data besar atau sedang mengembangkan aplikasi dengan data record yang mencapai puluhan ribu metode ini sangat dianjurkan untuk digunakan karena selain bisa meload data engan cepat juga user tidak terlalu lama menunggu load data dari server yang tentunya menghambat kinerja user.
Untuk membuat DataTables Serverside anda tentunya perlu mendownload plugin DataTables Bootstrap di https://www.datatables.net Berikut adalah script pemanggilan data melalui ajax di datatables serverside juga configurasi path file yang harus di sertakan :
- Buatlah sebuah database dengan nama mahasiswa kemudian buat table dengan nama data yang berisi field => (nim,nama,tempat_lahir,tanggal_lahir,alamat,notelp)
- Letakkan diantara tag <head> </head> css datatables dengan memanggil path filenya
<link rel="stylesheet" href="datatables/dataTables.bootstrap.css"/>
- Masukan path file datatables javascript dan code berikut di atas tag </body>
<script src="datatables/jquery.dataTables.js"></script>
<script src="datatables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
var dataTable = $('#lookup').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"ajax-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".lookup-error").html("");
$("#lookup").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#lookup_processing").css("display","none");
}
}
} );
} );
</script>
- Buat Sebuah table HTML untuk menampilkan data dari datatable dengan menyantumkan id lookup pada tag <table> seperti berikut :
<table id="lookup" class="table table-bordered table-hover">
<thead bgcolor="#eeeeee" align="center">
<tr>
<th>NIM</th>
<th>Nama </th>
<th>Tempat Lahir </th>
<th>Tanggal Lahir</th>
<th>Alamat </th>
<th>No Telepon</th>
<th class="text-center"> Action </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
- Langkah berikutnya adalah membuat ajax datatables serverside processing, copy kan code berikut dan simpan dengan nama ajax-grid-data.php
<?phpDari code di atas kita sudah bisa menampilkan data dengan datatables processing, untuk screenshoot aplikasi CRUD datatables serverside processing yang sudah jadi adalah seperti berikut :
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mahasiswa";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
/* Database connection end */
// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;
$columns = array(
// datatable column index => database column name
0 => 'nim',
1 => 'nama',
2 => 'tempat_lahir',
3 => 'tanggal_lahir',
4 => 'alamat',
5 => 'notelp'
);
// getting total number records without any search
$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get InventoryItems");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.
if( !empty($requestData['search']['value']) ) {
// if there is a search parameter
$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$sql.=" WHERE nama LIKE '".$requestData['search']['value']."%' "; // $requestData['search']['value'] contains search parameter
$sql.=" OR tempat_lahir LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR tanggal_lahir LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR alamat LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR notelp LIKE '".$requestData['search']['value']."%' ";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result without limit in the query
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length.
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); // again run query with limit
} else {
$sql = "SELECT nim, nama, tempat_lahir, tanggal_lahir, alamat, notelp ";
$sql.=" FROM data";
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");
}
$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$nestedData=array();
$nestedData[] = $row["nim"];
$nestedData[] = $row["nama"];
$nestedData[] = $row["tempat_lahir"];
$nestedData[] = $row["tanggal_lahir"];
$nestedData[] = $row["alamat"];
$nestedData[] = $row["notelp"];
$nestedData[] = '<td><center>
<a href="edit.php?kd='.$row['nim'].'" data-toggle="tooltip" title="Edit" class="btn btn-sm btn-warning"> <i class="menu-icon icon-pencil"></i> </a>
<a href="index.php?hal=hapus&kd='.$row['nim'].'" data-toggle="tooltip" title="Hapus" class="btn btn-sm btn-danger"> <i class="menu-icon icon-trash"></i> </a>
</center></td>';
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // total data array
);
echo json_encode($json_data); // send data as json format
?>
- Halaman Awal
- Halaman Input Data
- Halaman Edit
Untuk Demo dan Download Sourcecode anda bisa mendapatkannya di link berikut :
DEMO
DOWNLOAD
Link Demo dan Link Download sudah saya berikan, Semoga tutorial dan penjelasan singkat ini bisa bermanfaat bagi anda yang sedang membangun aplikasi maupun yang sedang belajar programming, tetap semangat dan jangan menyerah.
Happy Coding & Programming