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

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

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

```Markdown:JavaScriptライブラリ
Bootstrap Table: 1.12.1
```

# クライアント

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

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

```JavaScript:クライアント
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
        }
    ]
});
```

[デモはこちら](https://yunbow.github.io/sample-bootstrap-table/03/01/)
[ソースファイルはこちら](https://github.com/yunbow/sample-bootstrap-table/tree/master/03/01/)

# サーバー

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

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

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

```JavaScript:サーバー
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
        }
    ]
});
```

[デモはこちら](https://yunbow.github.io/sample-bootstrap-table/03/02/)
[ソースファイルはこちら](https://github.com/yunbow/sample-bootstrap-table/tree/master/03/02/)

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

以上です。

# 関連記事

[[Bootstrap-Table] JavaScriptでテーブル表示（その1）](https://qiita.com/yun_bow/items/f3f70b42584b7fb56ea5)
[[Bootstrap-Table] JavaScriptでテーブル表示（その2）](https://qiita.com/yun_bow/items/f95e67c0bdec8923b315)
[[Bootstrap-Table] JavaScriptでテーブル表示（その3）](https://qiita.com/yun_bow/items/4ca4620da895b131edb9)
[[Bootstrap-Table] JavaScriptでテーブル表示（その4）](https://qiita.com/yun_bow/items/c84acb7fd45fdd481d46)
[[Bootstrap-Table] JavaScriptでテーブル表示（その5）](https://qiita.com/yun_bow/items/d845a2b3389fc8ca7ae1)