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

業務要件でグリッドを使っているとよくあるページネーション対応。大量のデータを表示する際に、20件ずつ表示するようにして欲しいと言った話を聞いたことは多々あるでしょう。

JavaScriptでページネーションを実現するのは面倒ですが、hifiveのグリッドコントローラを使うと容易に実装できます。

こちらにデモがあります。なお、ベースになるコードは hifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」 になります。

実装すると次のようになります。

HTMLの変更

HTMLではページネーションを操作するためのDOMを用意します。例えば今回は次のようになります。

初期化パラメータの追加

初期化する際に1ページに何件表示するかの指定を行います。今回は10件表示とします。

データサーチャーを用意する

今回は新しくデータサーチャーというプロパティを用意します。これはグリッドコントローラから呼び出せますが、繰り返し使うので取り出しておきます。

初期表示処理

グリッドの準備ができたところで現在のページ数やトータルのページ数を表示します。トータルのページ数は this._dataSearcher.getTotalPages() で取得できます。

ページを切り替える

ページの切り替えは次のように行います。以下は1ページ目への移動です。

後は各ページネーション移動の際のイベントで上記メソッドを実行します。以下は次のページへの移動処理の場合です。

this._updateCurrentPageはページ番号を表示する処理です。 this._dataSearcher.getCurrentPage() で現在のページ数が表示できます。

---

ページネーションの処理もhifiveのグリッドコントローラを使えば簡単に実装できます。ぜひデモで確認してください。

グリッドコントローラ – ページネーションデモ