当前位置:编程学习 > JS >>

如何利用jquery 实现表格的简单筛选

jquery的选择器:

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

jquery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有jquery插件提供

下面我们就来看一款如何利用jquery 实现表格的简单筛选吧。

 

$(function() {
$("#text1").keyup(function() {
var filtertext = $(this).val();
$("#<%=gridview1.clientid %> tr").not(":first").hide().filter(":contains('" + filtertext + "')").show();;
}).keyup();
});

前面代码

 

<%@ page language="c#" autoeventwireup="true" codefile="jquerytablefilter.asp教程x.cs" inherits="jquerytablefilter" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://mb.zzzyk.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">
<head runat="server">
<title></title>
<script src="script/jquery-1.3.2-vsdoc.网页特效" type="text/网页特效"></script>
<script type="text/网页特效">
$(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" datasourceid="sqldatasource1"
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 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,