有没有一种方法可以从asp.net中的gridview创建数据表？

Question

我想从asp.net中的gridview创建一个数据表。 到目前为止，这就是我所拥有的。 我想使用jquery datatables插件创建一个可以过滤和排序的表。 有没有一种方法可以使用SQL数据源从gridview进行此操作，或者还有其他需要执行的操作，例如创建html。 唯一的问题是我需要能够更新表或保持动态。

    <%@ 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>
    <asp:LoginView ID="LoginView2" runat="server"></asp:LoginView>
    </head>
<body>
    <form id="form1" runat="server">

    <div style="margin-left: 720px">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <asp:LoginView ID="LoginView1" runat="server">
            <AnonymousTemplate>
                <asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333">
                    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
                    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
                    <TextBoxStyle Font-Size="0.8em" />
                    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
                </asp:Login>
            </AnonymousTemplate>
        </asp:LoginView>

    </div>

        <asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="<%$ ConnectionStrings:Glsry_Taylor %>" SelectCommand="SELECT [TermText], [DefNbr], [DefVerNbr], [DefText], [AmplifyingExplanationText], [SeeAlsoText], [AuthoritativeSrcText], [ScopeName], [DomnName], [GovernanceStateName], [LastUpdtTimestamp] FROM [Glossary] ORDER BY [TermText]"></asp:SqlDataSource>

        <asp:GridView ID="GridView1" runat="server"  AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"

            $(document).ready(function() {
              $('#example').dataTable();
                  } );

             DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary" EnableSortingAndPagingCallbacks="True">

            <Columns>
                <asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="TermText" />
                <asp:BoundField DataField="DefNbr" HeaderText="Definition #" ReadOnly="True" SortExpression="DefNbr" />
                <asp:BoundField DataField="DefVerNbr" HeaderText="Definition Vers #" ReadOnly="True" SortExpression="DefVerNbr" />
                <asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="DefText" />
                <asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" />
                <asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="SeeAlsoText" />
                <asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" />
                <asp:BoundField DataField="ScopeName" HeaderText="Scope Name" SortExpression="ScopeName" />
                <asp:BoundField DataField="DomnName" HeaderText="Domn Name" SortExpression="DomnName" />
                <asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" />
                <asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Update" SortExpression="LastUpdtTimestamp" />
            </Columns>

           <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.min.js"></script>

        </asp:GridView>




    </form>


</body>
</html>

Answer 1

首先，您需要在正确的位置放置页面的元素，然后尝试链接Javascript文件并在身体中部调用jQuery函数，这需要在头部完成：

<head>
    <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.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#GridView1').dataTable();
        });
    </script>
</head>

还要注意，必须使用GridView的ID来初始化DataTable。 搜索将自动启用，以启用过滤，您必须使用TemplateFields代替BoundFields，请参阅http://www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/有关如何转换它们的示例。 最后，在您的代码隐藏中，您需要强制GridView生成正确的<thead> ， <tbody>和<tfoot>部分：

    gvPortfolio.UseAccessibleHeader = true;
    gvPortfolio.HeaderRow.TableSection = TableRowSection.TableHeader;
    gvPortfolio.FooterRow.TableSection = TableRowSection.TableFooter;

只需添加<FooterStyle CssClass="FilterCell" /> （或类似的东西）为每个页脚单元添加一个类，然后使用该类来连接您的过滤器：

$("tbody td.FilterCell").each(function (i) {
    this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
    $('select', this).change(function () {
        oTable.fnFilter($(this).val(), i);
    });
});

您可以在http://datatables.net/release-datatables/examples/api/multi_filter_select.html上找到本示例的其余部分。 注意，如上所示，您正在查找GridView生成的<td>元素，而不是示例中期望的<th>元素。