Today, We want to share with you filter html table using javascript.In this post we will show you excel like filter in html table, hear for bootstrap table filter dropdown we will give you demo and example for implement.In this post, we will learn about Simple Jquery Search Filter Example with an example.
How to Filter an HTML Table Using JavaScript (Search on the HTML Table)?
Example 1: How TO – Filter/Search Table?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#liveSearchDataTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#liveSearchDataTable th, #liveSearchDataTable td {
text-align: left;
padding: 12px;
}
#liveSearchDataTable tr {
border-bottom: 1px solid #ddd;
}
#liveSearchDataTable tr.header, #liveSearchDataTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Employees</h2>
<input type="text" id="myInput" onkeyup="fetchDataResults()" placeholder="Search for names.." title="Type in a Employee Name">
<table id="liveSearchDataTable">
<tr class="header">
<th style="width:60%;">Employee Name</th>
<th style="width:40%;">City</th>
</tr>
<tr>
<td>Dinesh Vasoya</td>
<td>Rajkot</td>
</tr>
<tr>
<td>Ankita pipariya</td>
<td>Surat</td>
</tr>
<tr>
<td>Meera sidupura</td>
<td>Ahemdabad</td>
</tr>
<tr>
<td>Sejal Ramanai</td>
<td>Bhavnagar</td>
</tr>
<tr>
<td>Virat Kohali</td>
<td>Jammnagar</td>
</tr>
<tr>
<td>Sumitra Gondaliya</td>
<td>Bhavnagar</td>
</tr>
<tr>
<td>Vijay Bhanderi</td>
<td>Ahemdabad</td>
</tr>
<tr>
<td>Rekha Tadapda</td>
<td>Rajkot</td>
</tr>
</table>
<script>
function fetchDataResults() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("liveSearchDataTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
multiple filter html table using javascript
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Table Filter Search - www.pakainfo.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
h3 span {
font-size: 22px;
}
h3 input.search-input {
width: 300px;
margin-left: auto;
float: right
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body class="mt32">
<div class="container">
<h3>
<span>JavaScript Filter Table Data</span>
<input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
</h3>
<table class="table table-striped mt32 customers-list">
<thead>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Email</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>virat Kohali</td>
<td>[email protected]</td>
<td>985698</td>
<td>Rajestan</td>
</tr>
<tr>
<td>2</td>
<td>Rohit Sharma</td>
<td>[email protected]</td>
<td>78548</td>
<td>Junagdha</td>
</tr>
<tr>
<td>3</td>
<td>Sachin Tendulkar</td>
<td>[email protected]</td>
<td>59868</td>
<td>Baroda</td>
</tr>
<tr>
<td>4</td>
<td>Malri Shivalik</td>
<td>[email protected]</td>
<td>WA1 1DP</td>
<td>Ahemdabad</td>
</tr>
<tr>
<td>5</td>
<td>Chaggan Dhameliya</td>
<td>[email protected]</td>
<td>S-985 55</td>
<td>Surat</td>
</tr>
<tr>
<td>6</td>
<td>Sejal Ramani</td>
<td>[email protected]</td>
<td>985698</td>
<td>Kalavad</td>
</tr>
<tr>
<td>7</td>
<td>Fuller Andrew</td>
<td>[email protected]</td>
<td>E89 692</td>
<td>Bhavanagar</td>
</tr>
<tr>
<td>8</td>
<td>4cgandhi free</td>
<td>[email protected]</td>
<td>G7F 0K8</td>
<td>Rajkot</td>
</tr>
</tbody>
</table>
</div>
<script>
(function(document) {
'use strict';
var TableFilter = (function(myArray) {
var search_input;
function _onInputSearch(e) {
search_input = e.target;
var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
myArray.forEach.call(tables, function(table) {
myArray.forEach.call(table.tBodies, function(tbody) {
myArray.forEach.call(tbody.rows, function(row) {
var text_content = row.textContent.toLowerCase();
var search_val = search_input.value.toLowerCase();
row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
});
});
});
}
return {
init: function() {
var inputs = document.getElementsByClassName('search-input');
myArray.forEach.call(inputs, function(input) {
input.oninput = _onInputSearch;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
TableFilter.init();
}
});
})(document);
</script>
</body>
</html>
I hope you get an idea about jquery filter table rows by column value.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.