Home > Web Front-end > JS Tutorial > A sentence of code based on JQuery to implement simple filtering of tables_jquery

A sentence of code based on JQuery to implement simple filtering of tables_jquery

WBOY
Release: 2016-05-16 18:22:31
Original
1136 people have browsed it

效果图:
A sentence of code based on JQuery to implement simple filtering of tables_jquery
代码:

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %>











DataKeyNames="OrderID" DataSourceID="SqlDataSource1"
HorizontalAlign="Left" PageSize="50" >

SortExpression="OrderID" InsertVisible="False" />
SortExpression="CustomerID" />
SortExpression="EmployeeID" />
SortExpression="OrderDate" />
SortExpression="RequiredDate" />
SortExpression="ShippedDate" />
SortExpression="ShipVia" />
SortExpression="Freight" />


ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT top 50 * FROM [Orders]">





 
JQuery代码就:
复制代码 代码如下:

$(function() {
$("#Text1").keyup(function() {
var filterText = $(this).val();
$("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" filterText "')").show();;
}).keyup();
});


里面最重要的就是JQuery的选择器:

1:$("#<%=GridView1.ClientID %> tr")选择表格的所有行;
2:not(":first"):除去第一行表头行;
3:filter(":contains('" filterText "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来;
4:最后加一句keyup()是为了在提交后重新触发keyup事件。(但是在这里没有作用因为我用的客户端控件没有ViewState
若是服务器端控件就会看见他的作用)。

JQuery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
给我们选择, 但是这种简单的功能,我不会去选择加入一个JavaScript文件库,呵呵。
作者:破  浪
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template