1

asp.net のグリッドビューからデータテーブルを作成したいと考えています。これは私がこれまでに持っているものです。jquery datatables プラグインを使用して、フィルター処理および並べ替えが可能なテーブルを作成したいと考えています。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 を初期化する必要があることにも注意してください。検索は自動的に有効になります。フィルタリングを有効にするには、BoundFields の代わりに TemplateFields を使用する必要があります。http: //www.dreamincode.net/forums/topic/222381-insert-data-using-gridview-footerrow/ を参照してください。それらを変換する方法の例については。<thead>最後に、コード ビハインドで、GridView に適切な、<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 に答える