Learn how to create a filterable/searchable HTML table using just a few lines of JQuery code. This beginner-friendly tutorial will guide you through the process step-by-step.
Table of Contents
Whenever there is a large list of records you display it in the HTML table. In that case, it is better to allow users to search for text within the table.
Here we will learn how to perform a real-time search and filter an HTML table. When a word is entered, all rows in the table (except the table header) are searched and the rows containing the matching word are displayed.
A filterable/searchable HTML table can provide many benefits, such as improving user experience and making it easier to navigate large amounts of data. Creating a filterable table is a straightforward process that can be achieved with just a few lines of code.
Let's start making these Filter/Search HTML Table using HTML, CSS and JavaScript(JQuery) step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML file. In the HTML file, create an input element with an id name “search” for the search box and create your table element with an id name “tab”. Also, In head section of your HTML page paste jquery library script tag. Without this script tag, your function will not work.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's an explanation of the HTML code:
Document Type Declaration
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>: Declares the document to be HTML5.<html lang="en">: Root element of the HTML document, with the language set to English.
Head Section
<head> <title>Filter/Search HTML Table</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="styles.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head>
<title>Filter/Search HTML Table</title>: Sets the title of the web page to "Filter/Search HTML Table".<meta charset="UTF-8" />: Sets the character encoding of the document to UTF-8.<meta name="viewport" content="width=device-width" />: Ensures the webpage is responsive by setting the viewport width to the device's width.<link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" for styling the page.<script src="https://ajax.googlea.../jquery.min.js"></script>: Links to the jQuery library hosted by Google.
Body Elements
<div>: A container div for grouping the heading, search input, and table.
Heading
<h1>codewithFaraz</h1>
<h1>codewithFaraz</h1>: An h1 heading displaying "codewithFaraz".
Search Input
<b>Search the table for Name, Location or Age: <input id="search" type="text" placeholder="Search here"> </b> <br><br>
<b>: A bold element containing the search label and input.<input id="search" type="text" placeholder="Search here">: A text input field with the ID "search" and a placeholder "Search here".
Table
<table id="tab">
<tr>
<th>Name</th>
<th>Location</th>
<th>Age</th>
</tr>
<tbody>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>32</td>
</tr>
<tr>
<td>Davolio Nancy</td>
<td>Canada</td>
<td>42</td>
</tr>
<tr>
<td>Fuller Andrew</td>
<td>United State</td>
<td>39</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>35</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>29</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>40</td>
</tr>
</tbody>
</table>
<table id="tab">: A table element with the ID "tab".<tr>: Table row elements.<th>: Table header elements for "Name", "Location", and "Age".<tbody>: Table body containing multiple rows of data.
JavaScript
<script src="script.js"></script>
<script src="script.js"></script>: Links an external JavaScript file named "script.js" for adding interactivity, such as the search/filter functionality for the table.
This is the basic structure of our search table using HTML, and now we can move on to styling it using CSS.
Build a Professional Article Details Page from Scratch with HTML, CSS, and Vanilla JavaScriptStep 2 (CSS Code):
Next, the CSS styles are optional for the table. Anyhow, you can use the following CSS styles if you want to style the table.
Here's an explanation of the CSS code:
Table Styles
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
- font-family: arial, sans-serif;: Sets the font for the entire table to Arial. If Arial is not available, a generic sans-serif font will be used as a fallback.
- border-collapse: collapse;: Ensures that table borders are collapsed into a single border, removing space between adjacent borders.
- width: 50%;: Sets the width of the table to 50% of the width of its containing element.
Table Cell Styles
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
- border: 1px solid #dddddd;: Applies a 1-pixel solid border with a light grey color (#dddddd) to both table data (
<td>) and table header (<th>) cells. - text-align: left;: Aligns the text within the table cells to the left.
- padding: 8px;: Adds 8 pixels of padding inside each table cell, creating space between the cell content and its border.
Heading Styles
h1 {
color: blue;
}
- color: blue;: Sets the text color of all
<h1>elements to blue.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
h1 {
color: blue;
} Step 3 (JavaScript Code):
Finally, add the following JQuery function into your project for table search filter.
Once you've linked JQuery to your HTML document, you can begin setting up the JavaScript code to make the table filterable. This code sets up an event listener for the input element with an ID of "search". When a user types in the input field, the table rows are filtered based on the input value.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(document).ready(function() {
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tab tr").filter(function() {
$(this).toggle($(this).text()
.toLowerCase().indexOf(value) > -1)
});
});
});Final Output:
Conclusion:
In this tutorial, we've shown you how to create a filterable/searchable HTML table with just a few lines of JQuery code. By following the steps we've outlined, you can make navigating large amounts of data much easier for users. We hope you found this tutorial helpful and encourage you to try creating a filterable table yourself.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
