c# - JqueryDataTablesプラグインをASPGridViewに適用します

Question

以前にPHPでこのプラグインを使用したことがあるので、ASPプロジェクトで再び使用することを考えました。

何らかの理由で、GridViewコントロールでは機能しません。

javascriptブロック：

<link type="text/css" href="../scripts/demo_table.css" rel="stylesheet" />  

    <script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $(".gvv").dataTable();
        });
        </script>

グリッドビューコード：

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="Prop_No" DataSourceID="testtt" CssClass="gvv">

何か間違ったことをしているのですか、それともDataTablesをASPコントロールに使用できないのですか？

score 39 · Accepted Answer

問題は、GridViewコントロールが<thead>要素を追加せず、ヘッダー行を<body>生成されたテーブルのセクションに配置するだけであるのに対し、データテーブルプラグインは<thead>テーブル内のセクションを必要とすることです。次のスクリプトを使用してみてください。

$(function () {
    $(".gvv").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

PSでは、RepeaterやListViewなどのデフォルトのレイアウトではレンダリングされないコントロールを使用することもできます

score 17 · Accepted Answer

GridView Prerenderイベントを使用して、theadタグを追加できます。このコードを試してくださいtbodytfoot

protected void GridView1_PreRender(object sender, EventArgs e) {
  // You only need the following 2 lines of code if you are not 
  // using an ObjectDataSource of SqlDataSource
  GridView1.DataSource = Sample.GetData();
  GridView1.DataBind();

  if (GridView1.Rows.Count > 0) {
   //This replaces <td> with <th> and adds the scope attribute
   GridView1.UseAccessibleHeader = true;

   //This will add the <thead> and <tbody> elements
   GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

   //This adds the <tfoot> element. 
   //Remove if you don't have a footer row
   GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
  }

}

以下のように、ソースページにイベントハンドラーを追加することを忘れないでください

<asp:GridView ID="GridView1" runat="server" CssClass="gvv"
      OnPreRender="GridView1_PreRender">
</asp:GridView>

これで、通常どおりJQuery関数を呼び出してレンダリングできます。

$(document).ready(function () {
    $(".gvv").dataTable();
});

score 1 · Accepted Answer

1

以下のコードを試してください。

ここに画像の説明を入力してください

于 2014-08-18T12:18:10.160 に答える

c# - JqueryDataTablesプラグインをASPGridViewに適用します

3 に答える 3

Related

Reference