Over a million developers have joined DZone.

Filter Records Using jQuery Without Post Page

DZone's Guide to

Filter Records Using jQuery Without Post Page

Read this article to follow a step-by-step tutorial in order to learn how to filter records using jQuery without post page.

Free Resource

RavenDB vs MongoDB: Which is Better? This White Paper compares the two leading NoSQL Document Databases on 9 features to find out which is the best solution for your next project.  


Searching the specific records, we will send the request using the AJAX method and search the records from the database, and then the result will be shown. Another method is that we will store all the records in any collection like dataset or session or any other variable and use LINQ for filtering it.

Reason for Using jQuery:

Your application will run very slowly if you post a huge amount of data on the server side. For solving this issue, we will search the data from jQuery in HTML table.

Code Ref With Description:

Add gridview control for binding the records.

<form id="form1" runat="server">
<asp:GridView ID="searchGridView" runat="server" ForeColor="Black" BackColor="#CCCCFF"
BorderColor="#00FFCC" Border Font-Names="Arial">
<AlternatingRowStyle BackColor="#FFCC99" BorderColor="#00FFCC" />

Create an input control for entering search value.

<span >Search:</span>
<input type="text" id="txtSearch" name="txtSearch" maxlength="50" />

Fetch the records with this method.

public DataTable getStudentDetails()
SqlCommand cmd = new SqlCommand();
SqlConnection con = new SqlConnection(mainConnectionString);
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "spstudentList";
cmd = new SqlCommand(cmd.CommandText,con);
SqlDataAdapter adapter = new SqlDataAdapter(cmd.CommandText, con);
DataTable employees = new DataTable();
return employees;

After getting the total records, bind it in the gridview, which is "searchGridview".

searchGridView.DataSource = getStudentDetails();

Now, when we enter any values for searching in the above input box, we will search the record without page posting and without hitting on server-side. We will use jQuery on keyup event for searching very fast.

$('#txtSearch').keyup(function () {
if ($('#txtSearch').val().length > 1) {
$('#searchGridView tr').hide();
$('#searchGridView tr:first').show();
$('#searchGridView tr td:containsNoCase(\'' + $('#txtSearch').val() + '\')').parent().show();
else if ($('#txtSearch').val().length == 0) {

Cancel the search value if the user presses Backspace or ESC key.

$('#txtSearch').keyup(function (event) {
if (event.keyCode == 27) {
function resetSearchValue() {
$('#searchGridView tr').show();

The below code will show jQuery to have a ":" selector, which is case insensitive, and the ":" selector remains unchanged.

$.expr[":"].containsNoCase = function (el, i, m) {
var search = m[3];
if (!search) return false;
return eval("/" + search + "/i").test($(el).text());

SQL Script:

Create Procedure spstudentList
Select * from table1

Note: We can search records from any control without page post. It helps us in searching records very quickly.

Link To Source Code:


Get comfortable using NoSQL in a free, self-directed learning course provided by RavenDB. Learn to create fully-functional real-world programs on NoSQL Databases. Register today.

asp .net ,jquery ,c# ,t-sql ,database ,ajax ,linq ,html

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}