hifiveのデータグリッドライブラリを使いこなす（3）「ページネーション」
業務要件でグリッドを使っているとよくあるページネーション対応。大量のデータを表示する際に、20件ずつ表示するようにして欲しいと言った話を聞いたことは多々あるでしょう。
JavaScriptでページネーションを実現するのは面倒ですが、hifiveのグリッドコントローラを使うと容易に実装できます。
こちらにデモがあります。なお、ベースになるコードは hifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」 になります。
実装すると次のようになります。
HTMLの変更
HTMLではページネーションを操作するためのDOMを用意します。例えば今回は次のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="col form-inline"> | |
| <span id="firstPage">≪</span> | |
| <span id="prevPage"><</span> | |
| <input id="currentPage" type="text"> / <span id="totalPages"></span>ページ | |
| <span id="nextPage">></span> | |
| <span id="lastPage">≫</span> | |
| </div> |
初期化パラメータの追加
初期化する際に1ページに何件表示するかの指定を行います。今回は10件表示とします。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var initParam = { | |
| searcher: { | |
| type: 'all', | |
| // 以下を追加 | |
| paging: { | |
| enable: true, | |
| pageSize: 10 | |
| } | |
| }, | |
| : |
データサーチャーを用意する
今回は新しくデータサーチャーというプロパティを用意します。これはグリッドコントローラから呼び出せますが、繰り返し使うので取り出しておきます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var scrollGridController = { | |
| __name: 'datagrid.sample.ScrollGridController', | |
| __meta: { | |
| _gridController: { | |
| rootElement: '#grid' | |
| } | |
| }, | |
| _gridController: datagrid.GridController, | |
| _dataSearcher: null, // 追加 | |
| : | |
| __ready: function() { | |
| : | |
| this._gridController.activate(dataSource, initParam); | |
| // 以下を追加 | |
| this._dataSearcher = this._gridController.getDataSearcher(); | |
| : | |
| } |
初期表示処理
グリッドの準備ができたところで現在のページ数やトータルのページ数を表示します。トータルのページ数は this._dataSearcher.getTotalPages() で取得できます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| datagrid.util.delay(1000, this.own(function() { | |
| this._gridController.search({}); | |
| // 以下を追加 | |
| var totalPages = this._dataSearcher.getTotalPages(); | |
| this.$find('#totalPages').text(totalPages); | |
| this._updateCurrentPage(); | |
| })); |
ページを切り替える
ページの切り替えは次のように行います。以下は1ページ目への移動です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this._dataSearcher.movePage(1); |
後は各ページネーション移動の際のイベントで上記メソッドを実行します。以下は次のページへの移動処理の場合です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '#nextPage click': function(context, $el) { | |
| context.event.preventDefault(); | |
| var currentPage = this._dataSearcher.getCurrentPage(); | |
| var totalPage = this._dataSearcher.getTotalPages(); | |
| if ((currentPage + 1) <= totalPage) { | |
| this._dataSearcher.movePage(currentPage + 1); | |
| this._updateCurrentPage(); | |
| } | |
| }, |
this._updateCurrentPageはページ番号を表示する処理です。 this._dataSearcher.getCurrentPage() で現在のページ数が表示できます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _updateCurrentPage: function() { | |
| var currentPage = this._dataSearcher.getCurrentPage(); | |
| this.$find('#currentPage').val(currentPage); | |
| } |
ページネーションの処理もhifiveのグリッドコントローラを使えば簡単に実装できます。ぜひデモで確認してください。
コメントは受け付けていません。