6

Bootstrap テーブルを使用してユーザー データを表示しています。現在、クライアント側のページネーションを使用していますが、レコードが非常に大きいため、サーバー側のページネーションを使用したいと考えています。誰かが私を助けてくれれば幸いです。

 <table id="tblsers" data-height="400" style="width: 100%;margin-top:0 !important" class="bTable" data-search="true"></table>

<script>
    $(document).ready(function () {
        getUsers();
    });
    function getUsers() {

        $.ajax({
            type: "POST",
            url: "Data.aspx/getUsers",
            contentType: "application/json; charset=utf-8",
        success: function (response) {
            debugger
            var table = "";

            var $tblRegisteredUsersTbl = $('#tblRegisteredUsers');

            if (response == "none") {

                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                table = "<tr style='font-weight: bold'><td>No records</td></tr>"
                $("#tblRegisteredUsers").html(table);
                $("#tblRegisteredUsers").children("tbody").css("text-align", 'center');
                $("#tblRegisteredUsers").addClass("table table-hover");

            } else {


                $("#tblRegisteredUsers").children("tbody").css("text-align", 'left');
                var registeredUsers = JSON.parse(response.d);
                $($tblRegisteredUsersTbl).hide();
                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                $tblRegisteredUsersTbl.bootstrapTable({
                    method: 'get',
                    columns: [
                    {
                        field: 'SNo', title: 'S.No', width: 10, align: 'center', sortable: true, formatter: function (value, row, index) {
                            if (value == null || value == "") {
                                return ['<span>N/A</span>']
                            }
                            return ['<span>' + value
                                + '</span>'];
                        }
                    },

                              {
                                  field: 'Name', title: 'User Name', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {

                                      if (value == null || value == "") {
                                          return ['<span>N/A</span>']
                                      }
                                      else {
                                          return value;
                                      }

                                  }
                              },
                              {
                                  field: 'Address', title: 'User Address', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {

                                      if (value == null || value == "") {
                                          return ['<span>N/A</span>']
                                      }
                                      else {
                                          return value;
                                      }

                                  }
                              },

                            {
                                field: 'Phone', title: 'User Phone', align: 'center', width: 200, sortable: true, formatter: function (value, row, index) {

                                    if (value == null || value == "") {
                                        return ['<span>N/A</span>']
                                    }
                                    else {
                                        return value;
                                    }

                                }
                            },


                    ],
                    onSort: function (name, order) {

                    },
                    data: registeredUsers,
                    cache: false,
                    height: 400,
                    pagination: true,
                    pageSize: 10,
                    pageList: [10, 25, 50, 100, 200],
                    search: true,
                    showColumns: true,
                    showRefresh: true,
                    minimumCountColumns: 2,



                });
                $($tblRegisteredUsersTbl).fadeIn();
              }

        },
        failure: function (msg) {
            showMessage("error", 'Some error occurred\n Please try again !');
        }
    });
    }
</script>
4

4 に答える 4

8

更新 (2019/05/07)

@tw1742は、「合計」インデックスをそれと呼ぶ必要があるかどうか尋ねました

答えはノーです。https://bootstrap-table.com/docs/api/table-options/#totalfieldでオーバーライドできます

属性: data-total-field

タイプ:文字列

詳細:「合計」データを含む着信 json のキー。

デフォルト:「合計」

例: https://examples.bootstrap-table.com/#options/total-data-field.html



元の回答

http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options

http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/server-side-pagination.html

機能のドキュメントといくつかの良い例があり、多くの人がプロジェクトの github issues でより明確な質問をしています。

すべてのコードがそこにあるため、簡潔な答えを出すことはできませんが、ドキュメントに記載されているように、フォーマットは次のようにする必要があります。

{
    "合計": 200,
    "行": [
        {
            "ID": 0,
            "名前": "アイテム 0",
            "価格": "$0"
        }、
        {
            "ID": 1,
            "名前": "アイテム1",
            "価格": "$1"
        }、

したがって、サーバーはそれを返す必要があり、送信されたパラメーターを使用して必要なサブセットを返すことができます。

良い例: http://issues.wenzhixin.net.cn/bootstrap-table/index.html

ページ 2 を選択すると、設定されていることがわかりdata?order=asc&limit=10&offset=20ます。F12 を押してネットワーク パネルを監視し、何が起こるかを確認してください。

これらのパラメーターは、SQL または同様のデータベース クエリに簡単に変換できます。また、使用しているデータソースのサブセットを返すために、任意のサーバー言語 (php、ect) で使用することもできます。

例：

テーブルからカラムを選択
リミット 10 オフセット 10


于 2015-11-13T06:01:22.587 に答える
7

この SCREAMS for Datatables。探しているクエリの更新を行うための ajax が組み込まれており、さらに並べ替え、フィルタリング、ページングなどが組み込まれています。

ajax ソースの Datatable の 簡単な例を次に示します。Bootstrap CSS を利用するには、スタイリング ガイドも参照してください。

最後に、データテーブルを使用するかどうかに関係なく、サーバー側のさまざまなフィルター、並べ替えなどすべてに対応する必要があることに注意してください。つまり、クエリは、任意のパラメーターを処理できる必要があります。あなたのデータを選別するために使用したい。Datatables の例には、PHP で作成された既製の例がありますが、JSON オブジェクトを返す任意のページと確実に通信できます。

于 2015-05-06T16:55:04.147 に答える