ページング

概要

AJAXページにて、APIから取得したデータのページングUIを作成する際、「全ページ数」「現ページ番号」「前ページへのリンクは必要か？」等の情報を自動算出してくれるモジュール。JSON/JSONPレスポンスオブジェクトをそのままコンストラクタに渡すだけで使えるお手軽さ。独自のページングナビゲーションを作成する際の手助けになります。

* より簡単にページングUIを自動生成させたい場合はこちらの Recruit.UI.Page.Simple モジュールの方をご活用くださいませ。

>BACK TO TOP

サンプル

直接UIを生成するモジュールでは無いので...

>BACK TO TOP

動作条件

• jQuery v1.2 以降
• JSONまたはJSONP形式でAPIリクエストするAJAXページである事

>BACK TO TOP

簡易なコード例

コピペする事で手軽に再利用が可能なコード例はこちら

>BACK TO TOP

使い方

下記のように必要なファイルを読み込んだうえで...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="recruit.ui.js"></script>

このように利用します:

function json_request ( start ){

    var api_url = 'http://.../ab-road/tour/v1/'
        + '?key=...&area=...&start=' + start
        + 'format=jsonp&callback=?'; // jQuery JSONP おまじない

    $.getJSON( api_url, function ( json ){
        var page = new Recruit.UI.Page( json );
        var html = '';
        if( page.previous_page() ){
            // 前のページへのリンクを作成
        }
        html += '全' + page.total_pages() + 'ページ';
        if( page.next_page() ){
            // 次のページへのリンクを作成
        }
        //
        // この辺りで検索結果一覧の表示処理を書く
        //
    });
}

page.total_pages() や page.previous_page() 等、ページングに必要な情報を自動計算してくれるメソッド一式が提供されるため、実際のコーディング量を減らす事ができます。

>BACK TO TOP

利用可能メソッド

コンストラクタ

コンストラクタの第一引数に Recruit Webサービス から取得した JSON / JSONP レスポンスオブジェクトを渡す事で、下記メソッドによる情報取得が可能になります:

$.getJSON( api_url, function ( json ){
        var page = new Recruit.UI.Page( json );
    }

また第二引数にて一覧の表示件数 - Recruit Webサービスでのパラメータ count の値 - を渡す必要もあります。省略した際はデフォルト値 10 が使われます。

$.getJSON( api_url, function ( json ){
    // 1ページ100件表示の場合
    var page = new Recruit.UI.Page( json, 100 ); 
}

* Recruit Webサービスが返すAPIレスポンスに count の値を含ませる事で、この第二引数を不要にする事ができるのですが... 今後の改修をお待ちくださいませ。

>BACK TO TOP

基本的な情報を取得する

このモジュールが提供するメソッドは以下の通りです:

メソッド名	例	解説
total_entries()	210	全アイテム件数
entries_per_page()	10	ページ毎表示件数
current_page()	5	現在ページ番号
entries_on_this_page()	10	現在表示中のアイテム件数
last_page()	12	最終ページ番号
first_page()	1	最初のページ番号(常に1)
first()	11	現ページの最初のアイテム番号
last()	21	現ページの最後のアイテム番号
previous_page()	1	前ページ番号 (無い場合はundefined)
next_page()	3	次ページ番号 (無い場合はundefined)

JSANに登録されているJavascriptライブラリ - Data.Page - を元に作られたモジュールですので、各メソッドの詳細な使い方については同 Data.Page のドキュメントを参照してください。

>BACK TO TOP

APIに渡すパラメータを自動生成する

page_param()

第一引数に任意のページ番号 (数値) を渡す事により、以下のような構造体を取得する事ができます。これら情報はそのままAPIに渡すパラメータになっている為、AJAXなページング機能の実装を簡略化することができます。

$.getJSON( api_url, function ( json ){
    var page = new Recruit.UI.Page( json ); 
    var prm = page.page_param( 12 );
    prm.start;  // 12ページ目用の start 値
    prm.count;  // count 値
}

next_page_param() と previous_page_param()

同様に、前の・次のページ用のAPIパラメータは以下のメソッドで取得できます:

$.getJSON( api_url, function ( json ){
    var page = new Recruit.UI.Page( json ); 

    var next_prm = page.next_page_param();
    next_prm.start;  // 次ページ目用の start 値
    next_prm.count;  // count 値

    var prev_prm = page.prev_page_param();
    prev_prm.start;  // 前ページ目用の start 値
    prev_prm.count;  // count 値
}

>BACK TO TOP