---
description: https://codepen.io/markmichon/pen/kMLeQr
---

# \[DATATABLE]  DataTables Custom Filter Demo (ok)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FRIYPDcFVFzfrD3H8XRT9%2Fimage.png?alt=media&#x26;token=f0537791-03e4-456a-9fbe-e514f077f66e" alt=""><figcaption></figcaption></figure>

C:\xampp\htdocs\wpclidemo\index.php

```php
<html lang="en" class=" -webkit-">
<head>
  <meta charset="UTF-8">
  <title>CodePen - DataTables Custom Filter Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
  <style>
    body {
      padding: 20px;
    }
    td,
    th {
      min-width: 300px;
      text-align: left;
    }
  </style>
</head>
<body translate="no">
  <div class="row">
    <div class="large-6 columns">
      <label for="start">Start Date</label>
      <input id="start" type="date"><br>
    </div>
    <div class="large-6 columns">
      <label for="end">End Date</label>
      <input id="end" type="date"><br>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <button class="button radius" id="filter">Filter</button>
      <button id="clearFilter" class="button radius secondary">Clear Filter</button>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <div id="oTable_wrapper" class="dataTables_wrapper" role="grid"></div>
      <table id="oTable" class="dataTable">
        <thead>
          <tr role="row">
            <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="oTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 280px;">Name</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="oTable" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 280px;">Date</th>
          </tr>
        </thead>
        <tbody role="alert" aria-live="polite" aria-relevant="all">
          <tr class="odd">
            <td class=" sorting_1">Chasity Stanton</td>
            <td class="">1992-08-12</td>
          </tr>
          <tr class="even">
            <td class=" sorting_1">Craig Hill</td>
            <td class="">1992-08-11</td>
          </tr>
          <tr class="odd">
            <td class=" sorting_1">Debra Emerson</td>
            <td class="">2003-05-29</td>
          </tr>
          <tr class="even">
            <td class=" sorting_1">Elena Puckett</td>
            <td class="">1996-06-21</td>
          </tr>
          <tr class="odd">
            <td class=" sorting_1">Gross Frost</td>
            <td class="">2005-09-02</td>
          </tr>
          <tr class="even">
            <td class=" sorting_1">Leona Wilkinson</td>
            <td class="">1991-01-22</td>
          </tr>
          <tr class="odd">
            <td class=" sorting_1">Lois Elliott</td>
            <td class="">2003-02-22</td>
          </tr>
          <tr class="even">
            <td class=" sorting_1">Mcgowan Vance</td>
            <td class="">2010-06-25</td>
          </tr>
          <tr class="odd">
            <td class=" sorting_1">Mcintosh Hudson</td>
            <td class="">1992-12-13</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
  <script id="rendered-js">
    $(function() {
      // Basic Setup
      var $tableSel = $('#oTable');
      $tableSel.dataTable({
        'aaData': dummyData,
        'aoColumns': [{
            'mData': 'name'
          },
          {
            'mData': 'registered'
          }
        ],
        'sDom': '' // Hiding the datatables ui
      });
      $('#filter').on('click', function(e) {
        e.preventDefault();
        var startDate = $('#start').val(),
          endDate = $('#end').val();
        filterByDate(1, startDate, endDate); // We call our filter function
        $tableSel.dataTable().fnDraw(); // Manually redraw the table after filtering
      });
      // Clear the filter. Unlike normal filters in Datatables,
      // custom filters need to be removed from the afnFiltering array.
      $('#clearFilter').on('click', function(e) {
        e.preventDefault();
        $.fn.dataTableExt.afnFiltering.length = 0;
        $tableSel.dataTable().fnDraw();
      });
    });
    /* Our main filter function
     * We pass the column location, the start date, and the end date
     */
    var filterByDate = function(column, startDate, endDate) {
      // Custom filter syntax requires pushing the new filter to the global filter array
      $.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex) {
          var rowDate = normalizeDate(aData[column]),
            start = normalizeDate(startDate),
            end = normalizeDate(endDate);
          // If our date from the row is between the start and end
          if (start <= rowDate && rowDate <= end) {
            return true;
          } else if (rowDate >= start && end === '' && start !== '') {
            return true;
          } else if (rowDate <= end && start === '' && end !== '') {
            return true;
          } else {
            return false;
          }
        });
    };
    // converts date strings to a Date object, then normalized into a YYYYMMMDD format (ex: 20131220). Makes comparing dates easier. ex: 20131220 > 20121220
    var normalizeDate = function(dateString) {
      var date = new Date(dateString);
      var normalized = date.getFullYear() + '' + ("0" + (date.getMonth() + 1)).slice(-2) + '' + ("0" + date.getDate()).slice(-2);
      return normalized;
    };
    // Filler data for demo (thanks to http://json-generator.com)
    var dummyData = [{
        "name": "Chasity Stanton",
        "registered": "1992-08-12"
      },
      {
        "name": "Mcgowan Vance",
        "registered": "2010-06-25"
      },
      {
        "name": "Craig Hill",
        "registered": "1992-08-11"
      },
      {
        "name": "Lois Elliott",
        "registered": "2003-02-22"
      },
      {
        "name": "Gross Frost",
        "registered": "2005-09-02"
      },
      {
        "name": "Debra Emerson",
        "registered": "2003-05-29"
      },
      {
        "name": "Leona Wilkinson",
        "registered": "1991-01-22"
      },
      {
        "name": "Elena Puckett",
        "registered": "1996-06-21"
      },
      {
        "name": "Mcintosh Hudson",
        "registered": "1992-12-13"
      }
    ];
    //# sourceURL=pen.js
  </script>
</body>
</html>

```

