Custom search DataTable

Playground to test custom search function for DataTables

by gleba

HTML

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<div class="row">
  <div class="col-xs-12">
    <label for="dateRangePicker">Fecha de alta</label>
    <input id="dateRangePicker" name="dateRangePicker" type="text" />
    <select id="userTypeFilter">
      <option value="TODOS">TODOS</option>
      <option value="ADMIN">ADMIN</option>
      <option value="USER">USER</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <table id="example" class="display">
      <thead>
        <tr>
          <th>Fecha de alta</th>
          <th>Tipo de usuario</th>
          <th>Nombre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>10-10-2019</td>
          <td>USER</td>
          <td>Chandler</td>
        </tr>
        <tr>
          <td>01-09-2019</td>
          <td>USER</td>
          <td>Phoebe</td>
        </tr>
        <tr>
          <td>07-02-2019</td>
          <td>ADMIN</td>
          <td>Joey</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.row {
  margin: 10px;
}

JavaScript

var startDateFilter = "";
var endDateFilter = "";
var table;

const DATE_FORMAT = "DD-MM-YYYY";

$(document).ready(function() {

  initializeDataTable();
  initializeDateRangePicker();

  document.getElementById("userTypeFilter").addEventListener("change", filterTable);

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      
      let userTypeColumnData = data[1] || 0;
      let userRegisterDateColumnData = data[0] || 0;

      if (!filterByUserType(userTypeColumnData)) {
        return false;
      }

      if (!filterByDateRange(userRegisterDateColumnData)) {
        return false;
      }

      return true;
    }
  );

});

function filterByUserType(userTypeColumnData) {
  let userTypeSelected = $('#userTypeFilter').val();

  if (userTypeSelected === "TODOS") {
    return true;
  }
  
  return userTypeColumnData === userTypeSelected;
}

function filterByDateRange(userRegisterDateColumnData) {

  if (startDateFilter === "" || endDateFilter === "") {
    return true;
  } else {
    let momentUserRegisterDate = moment(new Date(userRegisterDateColumnData), DATE_FORMAT);
    let momentStartDateFilter = moment(new Date(startDateFilter), DATE_FORMAT);
    let momentEndDateFilter = moment(new Date(endDateFilter), DATE_FORMAT);

    return momentUserRegisterDate.isSameOrAfter(momentStartDateFilter) && momentUserRegisterDate.isSameOrBefore(momentEndDateFilter);
  }
}

function initializeDataTable() {
  table = $('#example').DataTable({
    paging: false
  });
}

function initializeDateRangePicker() {
  $('input[name="dateRangePicker"]').daterangepicker({
    opens: 'left',
    autoUpdateInput: false
  }, function(start, end, label) {
    setDateFilter(start, end);
  });


  $('#dateRangePicker').on('cancel.daterangepicker', function(ev, picker) {
    clearDateFilter();
  });
}

function setDateFilter(start, end) {
  startDateFilter = start;
  endDateFilter = end;

  $('#dateRangePicker').val(start.format(DATE_FORMAT) + " - " +...