[Bootstrap-Table] JavaScriptでテーブル表示（その3）ページング

Bootstrap Table のページングについて、
クライアントサイドとサーバーサイドの2通りを紹介します。

Bootstrap Table
http://bootstrap-table.wenzhixin.net.cn/

JavaScriptライブラリ

Bootstrap Table: 1.12.1

クライアント

クライアントサイドのページングには、sidePagination: 'client'と指定します。pageSize: 5は指定した1ページあたりに表示する件数をテーブルに表示します。

sortName: 'name'は初期ソートカラム名、sortOrder: 'asc'は初期ソート順となります。

クライアント

userTable.bootstrapTable({
    sidePagination: 'client',
    sortName: 'name',
    sortOrder: 'asc',
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 25, 50, 100],
    data: initDataList,
    columns: [
        {
            field: 'name',
            title: 'Name',
            sortable: true
        },
        {
            field: 'age',
            title: 'Age',
            sortable: true
        },
        {
            field: 'gender',
            title: 'Gender',
            sortable: true
        }
    ]
});

デモはこちら
ソースファイルはこちら

サーバー

サーバーサイドのページングには、sidePagination: 'server'と指定します。ページを変更する度に、GETリクエストが行われます。つまり、クライアントサイドのページングでは全ページのデータを指定しますが、サーバーサイドでは、1ページに表示する分のデータを指定します。

GETリクエストのリクエストパラメータは下記のようになっています。
・limitは1ページの件数を取得します。
・offsetはページ数を指定します。（0から）
・sortはソートのカラム名を指定します。
・orderはソート順を指定します。

レスポンスパラメータは下記の通りです。
・totalField: 'total'は、全ページの件数のキー名を指定します。
・dataField: 'list'は、1ページに表示するデータのキー名を指定します。

サーバー

userTable.bootstrapTable({
    sidePagination: 'server',
    showRefresh: true,
    sortName: 'name',
    sortOrder: 'asc',
    totalField: 'total',
    dataField: 'list',
    pagination: true,
    pageSize: 5,
    pageList: [5, 10, 25, 50, 100],
    ajax: function (params) {
        $.ajax({
            type: 'GET',
            url: '../01_json/sample001.json',
            data: {
                limit: params.data.limit,
                offset: params.data.offset,
                order: params.data.order,
                sort: params.data.sort
            }
        }).done(function (data) {
            params.success(data);
        }).fail(function (data) {
            params.error(data);
        });
    },
    columns: [
        {
            field: 'name',
            title: 'Name',
            sortable: true
        },
        {
            field: 'age',
            title: 'Age',
            sortable: true
        },
        {
            field: 'gender',
            title: 'Gender',
            sortable: true
        }
    ]
});

デモはこちら
ソースファイルはこちら

※デモでは、リクエストに対して適切なレスポンスを返すサーバーがないため、ページングは正常に動作しません。

以上です。

関連記事

[Bootstrap-Table] JavaScriptでテーブル表示（その1）
[Bootstrap-Table] JavaScriptでテーブル表示（その2）
[Bootstrap-Table] JavaScriptでテーブル表示（その3）
[Bootstrap-Table] JavaScriptでテーブル表示（その4）
[Bootstrap-Table] JavaScriptでテーブル表示（その5）