Question

我正在尝试使用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输出，有太多的网站处理我把putbin包含链接

http://pastebin.com/2qh2eXWY

Answer 1

要向页脚添加任何内容，您需要使用TemplateField控件而不是BoundField控件。有关如何执行此操作的示例，请参阅http://www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/。但需要注意的一点是，GridView控件生成的HTML将使用页脚中的<td>元素，而不是DataTables文档所期望的<th>元素。

可以将DataTables列过滤器加载项与Gridview一起使用

1 个答案: