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

<figure><img src="/files/hqfJ5Xqrhxs8seLG5zDu" 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>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/datatable-datatables-custom-filter-demo-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
