The strength of JQuery's selector allows us to easily implement simple filtering of clients. The JQuery plug-in for table filtering is provided. Let's take a look at how to use jquery to implement simple table filtering.
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.
Let's take a look at how to use jquery to implement simple table filtering.
$ (Function (){
$ ("# Text1"). keyup (function (){
Var filtertext = $ (this). val ();
$ ("# <% = Gridview1.clientid %> tr "). not (": first "). hide (). filter (": contains ('" + filtertext + "')"). show ();;
}). Keyup ();
});
Previous Code
<% @ Page language = "c #" autoeventwireup = "true" codefile = "jquerytablefilter. asp tutorial x. cs" inherits = "jquerytablefilter" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://mb.bKjia. c0m/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html xmlns = "http://www.bKjia. c0m/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script src = "script/jquery-1.3.2-vsdoc. webpage effects" type = "text/Webpage effects"> </script>
<Script type = "text/Webpage effects">
$ (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>