1

我想从 asp.net 中的 gridview 创建一个数据表。这就是我到目前为止所拥有的。我想使用 jquery datatables 插件来创建一个可以过滤和排序的表。有没有办法从 gridview 使用 sql 数据源执行此操作，或者我需要做其他事情，比如创建一个 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>
4

1 回答 1

1

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

<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找到此示例的其余部分。请注意，如上所示，您正在寻找<td>由 GridView 生成的元素，而不是<th>示例所期望的元素。

于 2013-10-30T21:42:40.847 回答