Membuat Filter Data Dengan Datatable Date Range - Rumah IT

Baru

recent

Membuat Filter Data Dengan Datatable Date Range

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 :

Membuat Filter Data Dengan Datatable Date Range

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 :

Membuat Filter Data Dengan Datatable Date Range

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.
All Rights Reserved by Rumah IT - Rumah Teknologi Informasi © 2013 - 2022
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.