How-to Make A Searchable Table with jQuery

Many websites have a table or multiple tables in a single web page, but the problem is, the table(s) are a static component of a web page. So, if a web page contains a single table or multiple large tables, there is no way to search them quickly and easily, unless the end user scrolls down and examines each table row, which can be a pain.So, how can we change this? Add some functionality to a table with jQuery. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML and was initially released on August 26, 2006 by John Resig.

Add jQuery to Your Website

If you don’t have the jQuery JavaScript library already added to your website, you can simply add the following code snippet to the footer of your website:

In the above code snippet, we are using Google’s hosted jQuery library. It’ll provide great speed and reliability. The jQuery version we are using is 1.9.1. You can change this by changing the 1.9.1 of the jQuery library URL.

Table HTML

The table is easy to construct, so if you already have a table, it’s simple to modify that table’s HTML, to make the table searchable.

All you have to do is modify the <tr> HTML tag, like so:

<tr class="data-content" data-table="">

You’ll notice data-table="" in the available code snippet. It will not be empty. Instead, you should place a concentration word(s) in it or the value of a column’s cell. What this means is that you should pick a column, that will be used to match the search term to that table’s row, which must likely will be the first table column.

Here is an example table with demo text:

<table> <thead> <tr> <th>Name</th> <th>Date</th> <th>Description</th> </tr> </thead> <tbody> <tr class="data-content" data-table="Toyota"> <td>Toyota</td> <td></td> <td></td> </tr> <tr class="data-content" data-table="Ford"> <td>Ford</td> <td></td> <td></td> </tr> </tbody> </table>

Search Form HTML

You will also need to make a search form in order for the end user to search the table. To do this, add the following HTML anywhere inside the body HTML tags:

<form role="form"> <input type="text" id="search" placeholder="Search the table..."> </form>

Placing the HTML above the table is probably the best place to put the code snippet but it’s really up to you, as it can be placed anywhere. You can also add CSS classes to the form elements or wrap the above code snippet in HTML to further add style. But make sure the input text field has an ID of search, id="search", as the JavaScript we’ll be using looks for this.


Add the following JavaScript (minified) to the footer of your web page, but make sure it’s after the jQuery library.

$(document).ready(function() { $('#search').keyup(function() { var searchterm = $('#search').val().toLowerCase(); $('.data-content').each(function() { var theValue = $(this).attr('data-table').toLowerCase(); if (theValue.indexOf(searchterm) == 0) { $(this).show(); } else { $(this).hide(); } }); }); });

Here is the same code as above, but not minified, just in case you want to change anything:

 $(document).ready(function() { $('#search').keyup(function() { var searchterm = $('#search').val().toLowerCase(); $('.data-content').each(function() { var theValue = $(this).attr('data-table').toLowerCase(); if (theValue.indexOf(searchterm) == 0) { $(this).show(); } else { $(this).hide(); } }); }); }); 

You’re done! You’ve now created an awesome searchable table with jQuery.