3 Steps to Develop jQuery Data Table with Search Filter

In this tutorial I will explain and show you how to develop your own jQuery Data Table with Search Filter from scratch. This jQuery Data Table quickly search and filter the table records with any input you enter in a text box.

Working of jQuery Data Table:

  • Takes user input
  • Performs case-insensitive search i.e. “spider” or “SPIDER” or “Spider” are same
  • Shows filtered table data

jQuery Methods Used:

  • .keyup(handler) to detect keyup event of text input
  • .filter() filter specific html elements based on a condition and return them
  • .toggle() shows html elements on true else hides them
  • .text() gets the text of a html element
  • .val() gets the value of a html form element i.e. input, select and etc
  • .toLowerCase() to convert a string to lower case
  • .indexOf() returns the position/index of first occurrence of a given value in a string

 

Watch the video for more practical demonstration on it or continue reading the article.

Step 1: Create a Text Input and Table Structure:

First of all, lets create the basic html structure for search input and data table with some data in it and add some css styling.

HTML Structure :

<div>
<input id="txtsearch" type="text" placeholder="Search Here..." />
<br><br>

<table>
  <thead>
    <tr>
      <th>Movies</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody id="table">
    <tr>
      <td>Spiderman Homecoming</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>Wonder Woman</td>
      <td>8/10</td>
    </tr>
    <tr>
      <td>The Guardians of Galaxy 2</td>
      <td>8/10</td>
    </tr>
    <tr>
      <td>Ant Man</td>
      <td>7.5/10</td>
    </tr>
  </tbody>
</table>
</div>

 

CSS Styles :

<style>
table {
    font-family: arial;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #e3e3e3;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #efefef;
}
</style>

 

It will output like this :

3 Steps to Develop jQuery Data Table with Search Filter

You can see I have added the css id to input and table. Input has id=“txtsearch” and table body has id=“table”. The reason to add id to table body is to limit search scope within our table body data and not the table headings. We’ll use the ids in our jQuery code to target these 2 html elements.

 

Step 2: Detect the Keyup event of Input Text Box using jQuery:

We need to detect input when it’s entered and get it’s value. For this we will use the .keyup(handler) of jQuery to detect keyup events on input text box and define our handler function. Within our handler function we will create a variable named “value” to store text box value. To get text box value we will use .val() and convert it to lowercase with .toLowerCase() so we can have a case-insensitive search means “spider” or “Spider” or “SPIDER” will give same results.

Like always we’ll start with $(document).ready(); function and make sure to include jQuery library first:

So, with #txtsearch we have targeted the text box and it’s keyup event. $(this) will provide the text box object which we have targeted.

Step 3: Create Search and Filter Logic for jQuery Data Table:

At this step we will create our logic by matching the text box value in all data table rows and showing the filtered table data.

jQuery Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

 $("#txtsearch").keyup(function(){
    var value = $(this).val().toLowerCase();

    $("#table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    
  });
});
</script>

You can see that I have targeted the table rows by $(“#table tr”) and with .filter() I have specified the matching logic that will be for each row. So each row that will pass the filter criteria will be visible and others will be invisible which is done by .toggle(). Based on the condition within .toggle() it shows and hides the rows.

$(this).text() gets the current row text and .toLowerCase() converts row text to lower case and .indexOf(value) matches the row text with our “value” variable and returns the index of first occurrence of “value” within the row text which if it’s greater than -1 means value is present within the row so condition becomes true for .toggle() to show that current row. In other case if it’s -1 then .toggle() hides that particular row.

 

Working Output :

3 Steps to Develop jQuery Data Table with Search Filter-Working

 

Entire Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

 $("#txtsearch").keyup(function(){
    var value = $(this).val().toLowerCase();

    $("#table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    
  });
});
</script>

<style>
table {
    font-family: arial;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #e3e3e3;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #efefef;
}
</style>

<div>
<input id="txtsearch" type="text" placeholder="Search Here..." />
<br><br>

<table>
  <thead>
    <tr>
      <th>Movies</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody id="table">
    <tr>
      <td>Spiderman Homecoming</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>Wonder Woman</td>
      <td>8/10</td>
    </tr>
    <tr>
      <td>The Guardians of Galaxy 2</td>
      <td>8/10</td>
    </tr>
    <tr>
      <td>Ant Man</td>
      <td>7.5/10</td>
    </tr>
  </tbody>
</table>
</div>

Conclusion :

I hope I am able to put it easy for you to explain and demonstrate on how you can develop your own jQuery Data Table with your own filtering criteria 🙂 If you have any confusion feel free to comment on it.
Finally, if you found this article useful then subscribe to this blog and my Youtube Channel and like my Facebook page as well. Because I will be posting more useful code stuff with tutorial videos so you will always be updated with them.

Have a great day! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *