tech @ Beacon Deacon

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:
TitleEpisodeRatingYear Released
The Phantom MenaceIPG1999
Attack of the ClonesIIPG2002
Clone WarsN/ATV2008
Revenge of the SithIIIPG-132005
RebelsN/ATV2014
Rogue OneN/APG-132016
A New HopeIVPG1977
Empire Strikes BackVPG1980
Return of the JediVIPG1983
The Force AwakensVIIPG-132015

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/.

Back to top