Contents
Hai! Seperti rencana sebelumnya, admin akan membuat jQuery DataTables dengan custom Search Filter. Dimana Filter terdapan di luar library datatables yang di sediakan secara default.
Sebelumnya cek kembali Tutorial sebelumnya Menampilkan Database Server Side dengan jQuery Datatables. Yang ditambahkan ada disisi kodingan, tidak pada databasenya.
Check This Out..
1. Buat Filter
di contoh pakai AdminLTE berikut tampilannya
kode lengkap seperti berikut
<select class="form-control select2" style="width: 100%;" name="emp_position" id="emp_position">
<option value="">** All</option>
<?php
if(count(getAllEmployee_position()))
{
foreach(getAllEmployee_position() as $getPosition)
{
?>
<option value="<?php echo $getPosition['emp_position'];?>"><?php echo $getPosition['emp_position'];?></option>
<?php
}
}
?>
</select>
<select class="form-control select2" style="width: 100%;" name="emp_office" id="emp_office">
<option value="">** All</option>
<?php
if(count(getAllEmployee_office()))
{
foreach(getAllEmployee_office() as $getOffice)
{
?>
<option value="<?php echo $getOffice['emp_office'];?>"><?php echo $getOffice['emp_office'];?></option>
<?php
}
}
?>
</select>
<div class="form-group">
<label class="col-sm-4 control-label box_labels">Total Data</label>
<div class="col-md-7 label_pas" id="totalData"> </div>
</div>2. Tambahkan model fungsi database
# Untuk filter Position
function getAllEmployee_position()
{
global $db_mysql;
$result = $db_mysql->select("SELECT distinct emp_position FROM tbl_employee");
return $result;
}
# Untuk filter Office
function getAllEmployee_office()
{
global $db_mysql;
$result = $db_mysql->select("SELECT distinct emp_office FROM tbl_employee");
return $result;
}3. Edit dan tambahkan pada library Datatables
Cek kembali pada kode library tutorial sebelumnya, di baris 21 point 3
"ajax": {
"url": "data.php",
"data": function(data){
// Read values
var emp_position = $('#emp_position').find(':selected').val();
var emp_office = $('#emp_office').find(':selected').val();
// Append to data
data.emp_position = emp_position;
data.emp_office = emp_office;
}
},
"drawCallback": function( settings, start, end, max, total, pre ) {
$("#totalData").html(this.fnSettings().json.iTotalDisplayRecords+" Record"); // total number of rows
},
"initComplete" : function () {
table_id.buttons().container().appendTo( $('.box-tools'));
},
"buttons": [
{
extend: 'excel',
text: 'Tombol Excel',
title: 'Excel',
sheetName: 'Excel'
},
{
extend: 'pdf',
text: 'Tombol Pdf',
title: 'PDF',
sheetName: 'PDF'
}
],Terakhir tambahkan kode berikut supaya filter yang dijalankan menjadi auto realod saat pemilihan data pada filter.
$('#emp_position').on('change', function () {
table_id.draw();
});
$('#emp_office').on('change', function () {
table_id.draw();
});4. Edit kode baris pada
## Custom Field value
$emp_position = $_POST['emp_position'];
$emp_office = $_POST['emp_office'];
## Search
$searchQuery = "";
if($emp_position != ''){
$searchQuery .= " AND emp_position = '".$emp_position."'";
}
if($emp_office != ''){
$searchQuery .= " AND emp_office = '".$emp_office."'";
}KETERANGAN:
Pada baris ini ditambahkan untuk mengirimkan jumlah data yang di panggil pada blok ID #totalData filter Total Data
"drawCallback": function( settings, start, end, max, total, pre ) {
$("#totalData").html(this.fnSettings().json.iTotalDisplayRecords+" Record"); // total number of rows
},Baris ini untuk menampilkan tombol library adds-on Datatables, tombol Excel, PDF, Print dll.. di contoh hanya dilampirkan Excel dan PDF
"initComplete" : function () {
table_id.buttons().container().appendTo( $('.box-tools'));
},
"buttons": [
{
extend: 'excel',
text: 'Tombol Excel',
title: 'Excel',
sheetName: 'Excel'
},
{
extend: 'pdf',
text: 'Tombol Pdf',
title: 'PDF',
sheetName: 'PDF'
}
],Jangan lupa tambahkan library untuk adds-on Datatable Button diatas, bisa di download via CDN di link berikut https://cdn.datatables.net/buttons/1.5.6/
Demikian tutorial kali ini mengenai custom DataTables, selanjutnya admin akan menyajikan tutorial mengenai CUD (Create, Update, Delete)
Tampilan hasil compile script diatas.
Author Profile
- Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.
