Trending Designs

Impressed by our work?

Hire us for exceptional web development services on Fiverr






Filter Table Data with JQuery | Create a Search Bar and Filter Table

08 May










I will teach you Filter HTML table using JQuery. Filter and OnKeyUp event is used to call the search function in Jquery.

Filter Table Data with JQuery | Create a Search Bar & Filter Table | Filter HTML table with Jquery

In this tutorial, i will teach you Filter HTML table using JQuery. Filter and OnKeyUp event is used to call the search function in Jquery with easy way. Other Query : How to Filter table using Textbox in jQuery | In this video we will learn how to filter records using Jquery | This video will provide you complete knowledge on filtering table using textbox.


In this tutorial, i will teach you Filter HTML table using JQuery. Filter and OnKeyUp event is used to call the search function in Jquery with easy way. Other Query : How to Filter table using Textbox in jQuery | In this video we will learn how to filter records using Jquery | This video will provide you complete knowledge on filtering table using textbox.


HTML


                            
                                <!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="main">
		<h2>Filter Table</h2><br>
		<input id="myInput" type="text" placeholder="Search..." class="form-control"><br><br>

		<table class="table table-hover">
			<thead class="thead-dark">
				<tr>
					<th>ID </th>
					<th>FirstName</th>
					<th>LastName</th>
					<th>Email</th>
					<th>City</th>
				</tr>
			<tbody id="myTable">
				<tr>
					<th>1</th>
					<th>Nickson</th>
					<th>Parvaiz</th>
					<th>nick@gmail.com</th>
					<th>new york</th>
				</tr>

				<tr>
					<th>2</th>
					<th>Farhan</th>
					<th>Ramzan</th>
					<th>farhan@gmail.com</th>
					<th>Karachi</th>
				</tr>

				<tr>
					<th>3</th>
					<th>Rafay</th>
					<th>abdullah</th>
					<th>rafay@gmail.com</th>
					<th>Dubai</th>
				</tr>

				<tr>
					<th>4</th>
					<th>John</th>
					<th>Everiest</th>
					<th>john@gmail.com</th>
					<th>London</th>
				</tr>

				<tr>
					<th>5</th>
					<th>Ali</th>
					<th>Bilal</th>
					<th>ali@gmail.com</th>
					<th>new york</th>
				</tr>
			</tbody>
			</thead>
		</table>
	</div>
</body>
</html>
                            
                        

CSS


                            
                                body {
		justify-content: center;
		align-content: center;
		align-items: center;
		padding: 5% 22%;
		background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
		background-size: cover;
	}

	h2 {
		font-family: gotham;
		color: #555;
		font-size: 1cm;
		margin-left: 30%;
	}

	table {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		width: 100%;
	}

	td,
	th {
		text-align: left;
		padding: 8px;
	}

	.main {
		height: 100%;
		width: 800px;
		background-color: #fff;
		padding: 5px 10px 10px 10px;
		border-radius: 30px 30px 30px 30px;
		box-shadow: 16px 22px 51px -24px rgba(51, 50, 52, 0.48);
	}
                            
                        

Jquery


                            
                                $(document).ready(function () {
			$("#myInput").on("keyup", function () {
				var value = $(this).val().toLowerCase();
				$("#myTable tr").filter(function () {
					$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

				});

			});

		});
                            
                        

Conclusion



Download Code Files


Share This Post :