Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【vte.cx入門】8.ページネーションを実装する:jQuery実践編

More than 5 years have passed since last update.

データ登録により、場合によってはデータ量が数百、数千と膨大になっていき、一度の取得では表示しきれないことがよく起こります。そんな時は一般的にページネーションを利用します。

vte.cxにもこのページネーション機能があるので、今回はjQueryによる設定方法を以下に記します。

1.ajaxでデータをページ指定で取得する(GETリクエスト)

上記データをjQueryのajax通信を使用し、GETリクエストを実行します。

javascript
$.ajax({
    url: '/d/hoge?f&l=50&n=1',
    method: 'get'
}).done(function(res) {
    alert('1ページ目取得成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
    alert('1ページ目取得失敗');
});

■リクエスト

param
url 取得先URL?f&l={表示件数}&n={ページ数} /d/hoge?f&l=50&n=1
method GET

1ページ辺りの最大表示件数を指定する

「?l」に最大表示件数を指定します。以下の指定は「50件/1ページ」ということになります。

?l=50

?l=100      ←   100件/1ページ

取得したいページ数を指定する

「?n」に取得したいページ数を指定します。以下の指定は「1ページ目」ということになります。

?n=1

?n=2      ←   2ページ目
?n=3      ←   3ページ目
?n=10     ←   10ページ目

■レスポンス

ステータス

ステータス メッセージ レスポンス
200 OK feed形式のデータ一覧
204 No entry (空)

204 No entryの場合は、取得先の配下に何も登録されていない状態です。

その他のエラーの場合、以下の仕様書の下部に細かく記載されています。
HTTPステータス一覧

「Please make a pagination index in advance. 」400エラー

このエラーが発生した場合は以下のページネーションの初期設定を行ってください。

ページネーションを実装するには初期設定が必要(Index生成)

実は上記の記述だけではエラーとなってしまいます。
それは、あらかじめページネーションのIndexを生成する必要があるからです。

まずは以下のURLにGETすることで、ページネーションのIndex生成を行います。

https://{自分のサービス}/d/hoge?f&l=50&_pagination=10

初期設定のURL解説

① まずはページネーションを設定したいデータのURLを決めてください。
仮に「/hoge」配下にするとします。

https://{自分のサービス}/d/hoge?f

② 次に1ページあたりの最大表示件数を決めます。
仮に50件とします。最大表示件数は「?l」パラメータに指定します。

?l=50

③ 次に何ページまでindexを貼るかを設定を決めます。
仮に10ページまでindexを貼るとします。indexは「?_pagination」パラメータに指定します。

?_pagination=10

④ これを組み合わせるページネーション機能の初期設定をするためのURLができあがります。

https://{自分のサービス}/d/hoge?f&l=50&_pagination=10

このURLは
「/hoge」に1ページ辺り最大50件まで表示するページを10ページ目まで設定
ということになります。

_paginationパラメータは以下のいずれかです。

  • {終了ページ番号}
  • {開始ページ番号},{終了ページ番号}

11ページ目を取得したい場合は、あらたに以下のURLをGETし、ページネーションのindexの続きを貼る必要があります。

https://{自分のサービス}/d/hoge?f&l=50&_pagination=11,20

11ページ目を取得したい場合、「?_pagination=11,20」とした方が処理の効率が良いです。
「_pagination=11」だと、1ページから11ページまでのページング情報(ページネーションのIndex)を作成します。最初に作成した10ページまでの情報がクリアされてしまいます。

【注意】?_paginationをしても「Please make a pagination index in advance. 」400エラーが発生する場合があります

ページのIndexを作成するのには時間がかかります。
例えば、100ページまでIndexを作るリクエストをした後、いきなりクライアント側が100ページ目の一覧取得を要求(GET)した時、サーバー側はまだIndexを張り終えていない場合があるため、Please make a pagination index in advance. 」エラーを返す場合があります。

その時は、「1秒後にもう一度100ページ目を取得する」といったリトライをする必要があります。

具体的には以下にソースを用意したのでそちらをご覧ください。

javascriptのソース(テンプレート)

以下のページネーションに必要なロジックを準備しました。
初期設定から実際に1ページ目を取得するまでのロジックです。
このソースをコピペし、画面で実行することで、ページネーションが実装できます。

// 2つのグローバル変数を定義
var _pageindex = 0; // ページネーションを貼る最大index
var _maxSize = 50;  // 1ページにおける最大表示件数(例:50件/1ページ)

/****
 * ページネーションの初期設定処理
 * @page ページネーションを設定するURL
 * @page 取得したいページ
 *****/
function indexBuilding(url, page) {
    var d = new $.Deferred();

    // ページング取得に必要な設定を行う
    var param;
    var pageindex = page + 9 > _pageindex ? page + 9 : _pageindex;
    if (pageindex > _pageindex) {
        if (_pageindex > 1) {
            param = _pageindex + ',' + pageindex;
        } else {
            param = pageindex;
        }

        // サーバにページネーション設定リクエストを送信
        $.getJSON(url + '?f&l=' + _maxSize + '&_pagination=' + param, function(){
            _pageindex = pageindex;
            d.resolve();
        }); 
    } else {
        d.resolve();
    }
    return d.promise();
}

function getFeed(url, pageNo) {
        $.ajax({
            url: url + '?f&l='+ _maxSize + '&n=' + pageNo,
            method: 'get',
            dataType: 'json'
        }).done(function(res) {

            // 「res」にurlの1件目から50件目が格納されている
            // pageNoが「2」だったら51件目から100件目が格納されている

        }).fail(function( jqXHR ) {

            // エラー発生
            if (jqXHR.responseJSON.feed.title === 'Please make a pagination index in advance.') {

                // 1秒後にリトライする
                setTimeout(function(){
                    getFeed(url, pageNo);
                }, 1000);

            } else {
                alert('一覧取得失敗');
            }
        });
}

$(function(){

    // /hogeにページネーション設定を行います。
    var url = '/d/hoge';

    // 1ページ目(1〜50件)を取得する(これを2にすれば51から100までを取得する)
    var pageNo = 1;

    // 初期処理呼び出し(Index生成)
    indexBuilding(url, pageNo).then(function(){

        // ここからロジックを書く
        // 一覧取得
        getFeed(url, pageNo);

    });
});

ページネーションの実装はvtecxblankに実際に動くものがあります。
以下のファイルを参考にしてみてください。

/app/demo_list.html
/app/scripts/demo_list.js

次回は画像の登録と参照方法を説明します。

takeyama
AngularJS始めたばかりの初心者です
http://reflexworks.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away