Effect Chart:
Code:
Copy Code code 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 ">
<title></title>
<script 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 (": a"). Hide (). Filter (": Contains (' + FilterText + ')"). Show ();
}). KeyUp ();
});
</script>
<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" datasourceid= "SqlDataSource1"
Horizontalalign= "left" pagesize= ">"
<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 * from [Orders]" ></asp:SqlDataSource>
</div>
</form>
</body>
The jquery code is:
Copy Code code as follows:
$ (function () {
$ ("#Text1"). KeyUp (function () {
var FilterText = $ (this). Val ();
$ ("#<%=gridview1.clientid%> tr"). Not (": a"). Hide (). Filter (": Contains (' + FilterText + ')"). Show ();
}). KeyUp ();
});
The most important thing inside is the jquery selector:
1:$ ("#<%=gridview1.clientid%> tr") selects all rows of the table;
2:not (": First"): Remove the header row;
3:filter (": Contains (' + FilterText + ')"): From the selected line above, filter the rows that contain filtertext in the travel text display;
4: Add the last sentence KeyUp () to trigger the KeyUp event after the commit. (But it doesn't work here because the client control I'm using has no viewstate
If the server-side control will see his role.
The power of the jquery selector allows us to save simple filters that implement the client. Finally add a sentence about table filter There are jquery plug-ins available
Give us a choice, but this simple feature, I will not go to choose to join a JavaScript file library, hehe.
Author: Breakers
