Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Compliant Database DevOps and the role of DevSecOps DevOps is becoming the new normal in application development, and DevSecOps is now entering the picture. By balancing the desire to release code faster with the need for the same code to be secure, it addresses increasing demands for data privacy. But what about the database? How can databases be included in both DevOps and DevSecOps? What additional measures should be considered to achieve truly compliant database DevOps? This whitepaper provides a valuable insight. Get the whitepaper

Introduction:

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">
<div>
<asp:GridView ID="searchGridView" runat="server" ForeColor="Black" BackColor="#CCCCFF"
BorderColor="#00FFCC" Border Font-Names="Arial">
<AlternatingRowStyle BackColor="#FFCC99" BorderColor="#00FFCC" />
</asp:GridView>
</div>
</form> 

Create an input control for entering search value.

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


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();
adapter.Fill(employees);
return employees;
}

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

searchGridView.DataSource = getStudentDetails();
searchGridView.DataBind();

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) {
resetSearchValue();
}
});

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

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

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
as
Begin
Select * from table1
End

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

Link To Source Code:

https://drive.google.com/open?id=1JU1SwAUqKbmM69vTs94CL8KOLvdskVxh

Compliant Database DevOps and the role of DevSecOps DevOps is becoming the new normal in application development, and DevSecOps is now entering the picture. By balancing the desire to release code faster with the need for the same code to be secure, it addresses increasing demands for data privacy. But what about the database? How can databases be included in both DevOps and DevSecOps? What additional measures should be considered to achieve truly compliant database DevOps? This whitepaper provides a valuable insight. Get the whitepaper

Topics:
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 }}