可以将DataTables列筛选器加载项与Gridview一起使用
本文关键字:Gridview 一起 加载项 DataTables 筛选 | 更新日期: 2023-09-27 18:23:50
我正试图在使用sql数据源的gridview表上使用DataTables列筛选器加载项,但我运气不佳。我让gridview渲染页眉和页脚,但我不能向页脚添加任何内容。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Glossary.aspx.cs" Inherits="Home.Glossary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title spellcheck="true">Glossary</title>
<style type="text/css" media="all">
@import "DataTables-1.9.4/DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css";
#form1 {
width: 100%;
}
</style>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="JQuery-DataTables-ColumnFilter/media/js/jquery.dataTables.columnFilter.js"></script>
<script>
$(document).ready(function () {
$('#<%=GridView1.ClientID%>').dataTable().columnFilter();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background: #A0A0A0">
</div>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary"
EnableSortingAndPagingCallbacks="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" ShowFooter="true"
AutoGenerateColumns="False" AutoGenerateEditButton="False" style="margin-right: 0px" Width="100%" Height="382px">
<Columns>
<asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="Term" />
<asp:BoundField DataField="DefNbr" HeaderText="Number" ReadOnly="True" SortExpression="DefinitionNumber" />
<asp:BoundField DataField="DefVerNbr" HeaderText="Version" ReadOnly="True" SortExpression="DefinitinonVersionNumber" />
<asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="Definition" />
<asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" />
<asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="See Also" />
<asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" />
<asp:BoundField DataField="ScopeName" HeaderText="Scope" SortExpression="Scope" />
<asp:BoundField DataField="DomnName" HeaderText="Domain" SortExpression="Domain" />
<asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" />
<asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Updated" SortExpression="LastUpdtTimestamp" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="<%$ ConnectionStrings:Glsry_Taylor %>" SelectCommand="SELECT * FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource>
</form>
</body>
</html>
这是呈现的CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Home
{
public partial class Glossary : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GridView1.PreRender += new EventHandler(GridView1_PreRender);
}
protected void GridView1_PreRender(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
//forces grid to render thead/tbody/tfoot elements
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
}
这是HTML输出,有太多的网站要处理我放在粘贴框中的链接包括
http://pastebin.com/2qh2eXWY
为了向页脚添加任何内容,您需要使用TemplateField
控件而不是BoundField
控件。看见http://www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/以获取如何执行此操作的示例。不过需要注意的是,GridView控件生成的HTML将在页脚中使用<td>
元素,而不是DataTables文档所期望的<th>
元素。