How to filter specific rows with Datatable | Inkoop Blog

Datatable is a javascript plugin which is mainly used for sorting and filtering HTML table data. We talk about how to customise the filtering of datatable rows.

Posted by Ameena on 30 Apr 2017

Datatable is a javascript plugin which is mainly used for sorting and filtering HTML table data.

If you want to filter some rows present in the table then you can think of datatable, which makes the job easy by finding the rows very quickly in the table.

There are two different filtering plug-in methods that DataTables presents:

  • Type based column filtering - filtering based on the type of the column.
  • Custom row filters - filtering applied to the data from the whole row.

Custom row filtering is possible by extending the DataTables custom filtering array with your function which returns a boolean value:

$.fn.dataTableExt.afnFiltering

Consider,

#filter.html

<!DOCTYPE html>
<html>
  <head>
    <title>Filtering</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <table id="filter" border="1" style="width:200px;">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr class="techlead">
          <td>Ram</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Rahul</td>
          <td>22</td>
        </tr>
        <tr class="manager">
          <td>Raju</td>
          <td>41</td>
        </tr>
        <tr>
          <td>Rajesh</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Rohan</td>
          <td>24</td>
        </tr>
      </tbody>
    </table>
    <input type="checkbox" id="hide" /> <label>Hide Taken</label>
  </body>
</html>

Sorting using Datatable:

#filter.html ...
<script>
  $("#filter").DataTable({
    sDom: "",
    infoEmpty: "No entries to show",
    aaSorting: [],
    aoColumnDefs: [{ bSortable: false, aTargets: [0] }],
  })
  var oTable = $("#filter").DataTable()

  $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    var nTr = oSettings.aoData[iDataIndex].nTr

    if (
      ($(nTr).hasClass("techlead") || $(nTr).hasClass("manager")) &&
      $("#hide").is(":checked")
    ) {
      return false
    } else {
      return true
    }
  })

  $("#hide").click(function () {
    oTable.draw()

    if ($(this).is(":checked")) {
      $("label").text("Show")
    } else {
      $("label").text("Hide")
    }
  })
</script>
...

nTr has all the rows of the table. So, if any row of nTr has any class named techlead or manager the return value is false else true.

The function returns

  • True
  • False

When true, the row is displayed else the row is not displayed.

keep Coding !!!

Ameena


Have a Project in mind?