【vb.net】jQueryを用いたgridviewページング機能実装

Question

■困っていること
vb.netにおけるgridviewのpostbackを使わないページング機能がうまくできません。

gridviewにページング機能を実装するための１つに、
gridviewプロパティの"AllowPaging"を"True"にするという方法があります。

上記の欠点は、ページングするためにpostbackがかかってしまうことです。

そこで、postbackを掛けないページング機能をjQueryで実現しようと試みました。
しかし、jQueryのコードが読みだされず、gridviewにページング機能が実装されません。

これは、gridviewに限ってうまくできず、
html上に直に書かれたtable（下記）はjQueryでページング機能を実現することができています。

<%-- うまくできているコード--%>
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

 <script>
        jQuery(function ($) {
            $("#table_Eng").DataTable();
        });
</script>
(中略)
 <table id="table_Eng" class="table table-bordered">
        <thead>
            <tr><th>No</th><th>English</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>One</td></tr>
            <tr><td>2</td><td>Two</td></tr>
            <tr><td>3</td><td>Three</td></tr>
            <tr><td>4</td><td>Four</td></tr>
            <tr><td>5</td><td>Five</td></tr>
            <tr><td>6</td><td>Six</td></tr>
            <tr><td>7</td><td>Seven</td></tr>
            <tr><td>8</td><td>Eight</td></tr>
            <tr><td>9</td><td>Nine</td></tr>
            <tr><td>10</td><td>Ten</td></tr>
            <tr><td>47</td><td>Eleven</td></tr>
        </tbody>
    </table>
(以下略）
```
gridviewに実装する場合と上記のようにhtmlに直にかかれたtableに実装する場合では、jQueryの読み出し方変わってくるのでしょうか(ほかに何か処置しないといけないのでしょうか）。

情報が不十分でしたら、申し訳ございません。

```
vb.net,jQuery,html
```

```
  <%-- うまくできないコード--%>
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

 <script>
        jQuery(function ($) {
            $("#table_Eng").DataTable();
        });
</script>
(中略)
 <table id="table_Eng" class="table table-bordered">
            <tr>
                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="No" DataSourceID="SqlDataSource2">
                    <Columns>
                        <asp:BoundField DataField="No" HeaderText="No" ReadOnly="True" SortExpression="No" />
                        <asp:BoundField DataField="English" HeaderText="English" ReadOnly="True" SortExpression="English" />
                    </Columns>
                </asp:GridView>

                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NoEnglishConnectionString %>" SelectCommand="SELECT * FROM [No_English]"></asp:SqlDataSource>
            </tr>
        </table>
(以下略）
```

Answer 1

postbackを掛けないページング機能をjQueryで実現しようと試みました。

SqlDataSource + GridView のページング機能を利用している場合は、ポストバックしないでクライアント側だけで JavaScript / jQuery でそのようなことはできません。

GridView から生成される html ソースは table, th, td, tr 要素になりますので、GridView ではページングせず全レコードを抽出し、自動的に生成される html ソースの table, th, td, tr 要素に JavaScript / jQeury プラグインなどを利用してページングするように考えてみてください。

GridView では thead, tbody, tfoot 要素はデフォルトではレンダリングされませんが、もし利用する JavaScript / jQeury プラグインではそれらが必要ということであれば、以下の記事のようにして生成できます。

GridView と thead, tbody, tfoot
http://surferonwww.info/BlogEngine/post/2012/12/16/generate-thead-tbody-and-tfoot-elements-in-gridview.aspx

それでも必要な html 要素が生成できないという場合は、GridView に代えて ListView, Repeater を利用してください。

SqlDataSource + GridView のページング機能を利用する場合も、上に書いた案のようにする場合も、どちらも全レコード取得するというのが無駄で、それを何とかしたい場合は以下のように ObjectDataSource を使う手段があります。それも考えてみてはいかがですか？

ObjectDataSource でページング
http://surferonwww.info/BlogEngine/post/2010/08/26/Paging-with-ObjectDataSource.aspx

【追記】

そこまで初心者ではないと思いますが念のため・・・

jQuery(function ($) {
    $("#table_Eng").DataTable();
});

の $("#table_Eng") の table_Eng は html の table 要素の id でなければならないようですが、

<asp:GridView ID="GridView2" ...

では GridView から生成される table 要素の id はそうなりません。マスターページを使っていると GridView2 とも違うので注意。

Comments

[退会済みユーザー]

早速のご回答ありがとうございます。
私自身、勉強不足でいろいろ調べたのですがわからないところがあったので、ご教授頂けますか。

>GridView から生成される html ソースは >table, th, td, tr 要素になりますので、>GridView ではページングせず全レコード
>を抽出し、自動的に生成される html ソー >スの table, th, td, tr 要素に JavaScript / >jQeury プラグインなどを利用してページ >ングするように考えてみてください。

gridviewまでは生成されています。
この段階ではページング機能は付けていません。
「全レコードを抽出し」というのは、SQLから出力されるレコードをデータテーブルで保持するという解釈で合ってますでしょうか？
「自動的に生成される…」という部分がわかりませんでした。gridview自身がtable要素、tr要素で構成されているということでしょうか。

私としては、gridviewが生成される。→生成されたgridviewにjQueryを使ってページング機能をつけるという動作をしていると考えていますが間違ってますでしょうか。

[退会済みユーザー]

> 「全レコードを抽出し」というのは、SQLから出力されるレコードをデータテーブルで保持するという解釈で合ってますでしょうか？

違います。DataTable は関係ありません。GridView のページングを有効にしてなければ（AllowPaging を true にしてなければ）、SqlDataSource の SelectCommand に設定された SELECT クエリで抽出された全レコードが表示されるはずです。

> 「自動的に生成される…」という部分がわかりませんでした。gridview自身がtable要素、tr要素で構成されているということでしょうか。

ブラウザに表示されたら、ブラウザを操作して html ソースを見てください。ASP.NET が GridView から自動的に html ソースを生成し、それをブラウザに送信した結果がそれです。

> 私としては、gridviewが生成される。→生成されたgridviewにjQueryを使ってページング機能をつけるという動作をしていると考えていますが間違ってますでしょうか。

間違ってます。上にも書きましたが、生成されるのは GridView ではなくて html ソースです。

JavaScript / jQuery でできることは ASP.NET が GridView を html に変換してブラウザに送信した html ソースをページングするだけです。そこでは GridView は関係ありません。

サーバー側で起こっていることとクライアント側で起こっていることの区別がついてないようです。その区別がついてないと話が通じないので、勉強して理解できるようになってください。