tables_jquery の単純なフィルタリングを実装するための JQuery に基づくコード文

效果图:

代:

复制代 代以下:

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

DataKeyNames="OrderID" DataSourceID="SqlDataSource1"
horizo​​ntalAlign="Left" PageSize="50" > ;
<列>
SortExpression="OrderID" InsertVisible="False" />
SortExpression="顧客ID" />
SortExpression="従業員ID" />
SortExpression="OrderDate" />
SortExpression="RequiredDate" />
SortExpression="ShippedDate" />
SortExpression="ShipVia" />
SortExpression="Freight" />
列>

ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT 上位 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 イベントを再度起動するためのものです。

JQuery の選択肢の多さにより、このような単一のクライアントの単一の選択を保存できると考えられます。插件
は私たちの選択を提供しますが、このような単純な機能を使用するために、JavaScript のファイルを追加することはありません。
作成者:
破 浪

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。