How To Create a Filter / Search HTML Table using JavaScript.

  • 3035

In this tutorial you can lean how to filter HTML Table using JavaScript. Using JavaScript you can filter large number of Html Table records by typing in the search box.

JavaScript is a scripting language to execute on client-side. Here you can search any of the columns using JavaScript.

Floating Label Input Fields:

Floating label inputbox

index.html:

Here, we created one HTML file. Which is hold HTML, CSS, and JavaScript code.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>JavaScript Table Filter Search</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>Employee ID</th>
		<th>Name</th>
		<th>Email</th>
		<th>Age</th>
		<th>Mobile</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>Varun Singh</td>
		<td>varun@coderglass.com</td>
		<td>22</td>
		<td>123456789</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Rohit Singh</td>
		<td>rohit@coderglass.com</td>
		<td>09</td>
		<td>233343633</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Alok Singh</td>
		<td>alok@coderglass.com</td>
		<td>23</td>
		<td>43243252252</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Amit Singh</td>
		<td>amit@coderglass.com</td>
		<td>34</td>
		<td>435345353</td>
	</tr>
	<tr>
		<td>5</td>
		<td>Rajesh Singh</td>
		<td>rajesh@coderglass.com</td>
		<td>33</td>
		<td>45353535345</td>
	</tr>
	<tr>
		<td>6</td>
		<td>Vijay Singh</td>
		<td>vijay@coderglass.com</td>
		<td>41</td>
		<td>34223425</td>
	</tr>
	<tr>
		<td>7</td>
		<td>Arvind Singh</td>
		<td>arvind@coderglass.com</td>
		<td>33</td>
		<td>5535353453</td>
	</tr>
	<tr>
		<td>8</td>
		<td>Ranjan Singh</td>
		<td>ranjan@coderglass.com</td>
		<td>42</td>
		<td>435353533636</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>
Tags:
Varun Singh

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.