A Filtered DataTable - Jamie Johnson
Jamie Johnson
April 28, 2016
SpryMedia's DataTables Table plug-in for jQuery is one of my favorite jQuery plug-ins and I have written a couple articles utilizing it on this site. Assume you have a DataTable set up. If you are unsure how, please visit my article Setting up a basic DataTable.
What if you want a table to be further filtered as you search? What if you want to have searches that are restricted only to particular columns and then search from the filtered data? It is possible. Look at the table below (and use the column searches to filter and the global search against the filtered results):
Search by Title: | Search by Rating: | ||
Title | Episode | Rating | Year Released |
---|---|---|---|
The Phantom Menace | I | PG | 1999 |
Attack of the Clones | II | PG | 2002 |
Clone Wars | N/A | TV | 2008 |
Revenge of the Sith | III | PG-13 | 2005 |
Rebels | N/A | TV | 2014 |
Rogue One | N/A | PG-13 | 2016 |
A New Hope | IV | PG | 1977 |
Empire Strikes Back | V | PG | 1980 |
Return of the Jedi | VI | PG | 1983 |
The Force Awakens | VII | PG-13 | 2015 |
Regarding the code used, you will want to take notice that I used the .dataTable() method, which allows legacy functionality like the column search demonstrated. This is a different method than the newer .DataTable() method. I have added additional comments in the code for further explanations. Here's the code:
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.css"/> <script type="text/javascript" src="//cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.js"></script> <style> td { text-align:center; } th:first-child, td:first-child { text-align:left; } #example_filter { position: relative; left: -40px; } </style> <script> $(document).ready(function() { var oTable = $('.datatable').dataTable( { // used .dataTable() instead of .DataTable() responsive: true, "aaSorting": [ ], "oLanguage": {"sSearch": "Search all columns:"}, "aoColumns": [ { "asSorting": [ "desc", "asc" ] }, { "asSorting": [ "desc", "asc" ] }, { "asSorting": [ "desc", "asc" ] }, { "asSorting": [ "desc", "asc" ] } //[ null ] will make it not sortable ] } ); /* NOTE: You can do other options like paging: false, searching: false, info: false, ordering: false and others at https://datatables.net/reference/option/ */ // Title search // 0 is the first td in tr.colsearch and is identified as titlesearch $(".colsearch td").eq(0).html('<input type="text" name="descriptionSearch" id="titlesearch" />'); $("#titlesearch").keyup( function () { // tying it to the identifier titlesearch oTable.fnFilter( this.value, 0, null, false ); // 0 is the first column } ); // Rating search // 2 is the third td in tr.colsearch and is identified as ratingsearch $(".colsearch td").eq(2).html('<input type="text" name="descriptionSearch" id="ratingsearch" />'); $("#ratingsearch").keyup( function () { // tying it to the identifier ratingsearch oTable.fnFilter( this.value, 2, null, false ); // 2 is the third column } ); } ); </script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr class="searchhelp"> <td><span>Search by Title:</span></td> <td><span>Search by Episode:</span></td> <td></td> <td></td> </tr> <tr class="colsearch"> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <tr><th>Title</th><th>Episode</th><th>Rating</th><th>Year Released</th></tr> </tr> </thead> <tbody> <tr> <tr><td>The Phantom Menace</td><td>I</td><td>PG</td><td>1999</td></tr> ... </tr> </tbody> </table>
If you don't want all the features and just want a table to be responsive, then add options comma separated (as shown below) in the call above where you see the responsive: true option:
paging: false, searching: false, info: false, ordering: false
Do consider that when you use ordering: false
, then none of the columns are sortable. If you want sortable columns, then do not use ordering: false
. Instead, use what I have above where { "asSorting": [ "desc", "asc" ] }
allows sorting (and yes, [ "asc", "desc" ]
can be used if you want the initial sort to be ascending order instead of descending order) and { "asSorting": [ null ] }
makes the column unsoratble.
Other options are available at https://datatables.net/reference/option/.