Membuat Filter Data Dengan Datatable Date Range
Rumahit.ID - Dalam kasus ini kita memiliki tabel data besar yang berisi informasi perjalanan. Setiap baris memiliki waktu mulai dan waktu akhir dari format berikut (yyyy-mm-hh HH: mm: dd). Bagaimana kita bisa menggunakan datepicker untuk menetapkan rentang filter di datatable? Kita ingin memiliki datepicker yang hanya memilih satu hari dan bukan waktu. Kita telah mencari di mana-mana untuk jawaban yang tepat tetapi saya tidak dapat menemukannya.
Misalnya kita ingin melihat semua baris Juli dengan memilih (01-07-2016 - 31-07-2016).
Untuk kasus diatas, sederhananya adalah kita bisa memanfaatkan fungsi callback filter ke array $ .fn.dataTable.ext.search . Fungsi tersebut sudah tersedia dalam paket JQuery Datatables. Bagaimana caranya kita memanggil Callback tersebut ? Berikut adalah cara untuk Membuat Filter Data Dengan Datatable Date Range.
1. Untuk Filter DataTable Dengan Tanggal Tunggal.
Buat file index.html sebagai file utama , isikan kode berikut :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
</p>
<table width="100%" class="display" id="datatable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
03/03/2017
</td>
<td>5</td>
</tr>
<tr>
<td>
03/04/2017
</td>
<td>4</td>
</tr>
<tr>
<td>
03/05/2016
</td>
<td>2</td>
</tr>
<tr>
<td>
03/06/2016
</td>
<td>17</td>
</tr>
<tr>
<td>
03/07/2017
</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Selanjutnya buat file script.js dan isikan kode berikut :
$(function() {
var oTable = $('#datatable').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
});
$("#datepicker_from").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
});
// Date range filter
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[0]).getTime();
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
return true;
}
);
Demo
Setelah dijalankan di browser, hasilnya akan seperti ini :
2. Untuk Filter DataTable Dengan Rentang Tanggal (Dari - Sampai)
Buat file index.html sebagai file utama , isikan kode berikut :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
<span id="date-label-to" class="date-label">To:<input class="date_range_filter date" type="text" id="datepicker_to" />
</p>
<table width="100%" class="display" id="datatable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
03/03/2016
</td>
<td>5</td>
</tr>
<tr>
<td>
03/04/2017
</td>
<td>4</td>
</tr>
<tr>
<td>
03/05/2017
</td>
<td>2</td>
</tr>
<tr>
<td>
03/06/2016
</td>
<td>17</td>
</tr>
<tr>
<td>
03/07/2017
</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Selanjutnya buat file script.js dan isikan kode berikut :
$(function() {
var oTable = $('#datatable').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
});
$("#datepicker_from").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
$("#datepicker_to").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
});
// Date range filter
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[0]).getTime();
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
if (maxDateFilter && !isNaN(maxDateFilter)) {
if (aData._date > maxDateFilter) {
return false;
}
}
return true;
}
);
Demo
Setelah dijalankan di browser, hasilnya akan seperti ini :
Demikianlah serial tutorial JQuery Membuat Filter Data Dengan Datatable Date Range yang dapat anda gunakan sebagai bahan referensi dalam membuat filter data berdasarkan rentang data tanpa me-load halaman.
