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.
.jpg)
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.
This is the basic structure of our search table using HTML, and now we can move on to styling it using CSS.
Step 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.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 😊
