Home > Developer > JavaScript
:
Code:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "JqueryTableFilter. aspx. cs" Inherits = "JqueryTableFilter" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Scripts src = "script/jquery-1.3.2-vsdoc.js" type = "text/javascript"> </Script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Text1"). keyup (function (){
Var filterText = $ (this). val ();
$ ("# <% = GridView1.ClientID %> tr "). not (": first "). hide (). filter (": contains ('" + filterText + "')"). show ();;
}). Keyup ();
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div style = "width: 60%;">
<Input id = "Text1" type = "text"/>
<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"
DataKeyNames = "OrderID" performanceid = "sqlperformance1"
HorizontalAlign = "Left" PageSize = "50">
<Columns>
<Asp: BoundField DataField = "OrderID" HeaderText = "OrderID" ReadOnly = "True"
SortExpression = "OrderID" InsertVisible = "False"/>
<Asp: BoundField DataField = "CustomerID" HeaderText = "CustomerID"
SortExpression = "CustomerID"/>
<Asp: BoundField DataField = "EmployeeID" HeaderText = "EmployeeID"
SortExpression = "EmployeeID"/>
<Asp: BoundField DataField = "OrderDate" HeaderText = "OrderDate"
SortExpression = "OrderDate"/>
<Asp: BoundField DataField = "RequiredDate" HeaderText = "RequiredDate"
SortExpression = "RequiredDate"/>
<Asp: BoundField DataField = "ShippedDate" HeaderText = "ShippedDate"
SortExpression = "ShippedDate"/>
<Asp: BoundField DataField = "ShipVia" HeaderText = "ShipVia"
SortExpression = "ShipVia"/>
<Asp: BoundField DataField = "Freight" HeaderText = "Freight"
SortExpression = "Freight"/>
</Columns>
</Asp: GridView>
<Asp: SqlDataSource ID = "SqlDataSource1" runat = "server"
ConnectionString = "<% $ ConnectionStrings: NorthwindConnectionString %>"
SelectCommand = "SELECT top 50 * FROM [Orders]"> </asp: SqlDataSource>
</Div>
</Form>
</Body>
</Html>
JQuery code:
Copy codeThe Code is as follows:
$ (Function (){
$ ("# Text1"). keyup (function (){
Var filterText = $ (this). val ();
$ ("# <% = GridView1.ClientID %> tr "). not (": first "). hide (). filter (": contains ('" + filterText + "')"). show ();;
}). Keyup ();
});
The most important component is the JQuery selector:
1: $ ("# <% = GridView1.ClientID %> tr") select all rows in the table;
2: not (": first"): removes the header row of the first line;
3: filter (": contains ('" + filterText + "')"): filter the rows that contain filterText from the selected rows;
4: Add keyup () to trigger the keyup event again after submission. (But it does not work here because the client control I use does not have ViewState.
If it is a server-side control, it will see its role ).
The strength of JQuery's selector allows us to easily implement simple filtering of clients. The last sentence about table filtering is provided by the JQuery plug-in.
I will not add a JavaScript file library to this simple function.
Author: broken waves
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
