hifiveのデータグリッドライブラリを使いこなす（8）「ページネーションする」

前回の表示件数の変更に続いて、ページネーションの追加方法です。ページネーションができると見たいデータだけを絞り込んで表示できます。

実際に動いているデモはこちらにあります。動かしているところは下記の画像になります。

HTMLにページネーション情報を追加する

まずHTMLにページを移動するボタンと現在、トータルのページ数を表示するHTMLを追加します。

ページネーション情報を表示する

実際にページネーションを表示するJavaScriptは次のようになります。1ページ目を表示している時には前のページに移動するボタンを無効にして、最後のページまで移動した時には次のページに移動しないようにします。使うのは this._dataSearcher.getCurrentPage() と this._dataSearcher.getTotalPages() になります。

後はこの update_page を適時呼び出します。

表示件数を変更した際にも呼び出します。

ページ移動のイベントを追加する

最後にページを移動する際の処理を追加します。これは this._dataSearcher.movePage を使います。まず前のページへの移動です。

次に次のページへの移動です。

これでページネーション機能が実装されました。

例えば最初のページへの移動であれば this._dataSearcher.movePage に 1 を与えるだけですし、最後のページへの移動は this._dataSearcher.getTotalPages() を与えるだけです。ごく簡単にグリッドに対してページネーションが使えるようになります。

実際に動いているデモはこちらにあります。ぜひ試してみてください。