您的位置：首页 > Web前端 > JQuery

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

2013-09-05 20:23 633 查看

JQuery的选择器的强大之处，让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供下面我们就来看一款如何利用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.php100.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.php100.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航