hifiveのデータグリッドライブラリを使いこなす（8）「ページネーションする」
前回の表示件数の変更に続いて、ページネーションの追加方法です。ページネーションができると見たいデータだけを絞り込んで表示できます。
実際に動いているデモはこちらにあります。動かしているところは下記の画像になります。
HTMLにページネーション情報を追加する
まずHTMLにページを移動するボタンと現在、トータルのページ数を表示するHTMLを追加します。
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="row"> | |
| <div class="col-md-12"> | |
| <button id="prev"><</button> | |
| <span id="page"></span>/ | |
| <span id="total_page"></span> | |
| <button id="next">></button> | |
| </div> | |
| </div> |
ページネーション情報を表示する
実際にページネーションを表示するJavaScriptは次のようになります。1ページ目を表示している時には前のページに移動するボタンを無効にして、最後のページまで移動した時には次のページに移動しないようにします。使うのは this._dataSearcher.getCurrentPage() と 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
| update_page: function() { | |
| var currentPage = this._dataSearcher.getCurrentPage(); | |
| $("#prev").attr('disabled', currentPage == 1); | |
| this.$find('#page').text(currentPage); | |
| var totalPage = this._dataSearcher.getTotalPages(); | |
| $("#next").attr('disabled', currentPage == totalPage); | |
| this.$find('#total_page').text(totalPage); | |
| }, |
後はこの update_page を適時呼び出します。
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({}); | |
| this.update_page(); // 追加 | |
| })); |
表示件数を変更した際にも呼び出します。
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
| '#paging change': function(context, $el) { | |
| context.event.preventDefault(); | |
| this._dataSearcher.setPageSize(parseInt($el.val())); | |
| this.update_page(); | |
| }, |
ページ移動のイベントを追加する
最後にページを移動する際の処理を追加します。これは this._dataSearcher.movePage を使います。まず前のページへの移動です。
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
| '#prev click': function(context, $el) { | |
| this._dataSearcher.movePage(this._dataSearcher.getCurrentPage() - 1); | |
| this.update_page(); | |
| }, |
次に次のページへの移動です。
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
| '#next click': function(context, $el) { | |
| this._dataSearcher.movePage(this._dataSearcher.getCurrentPage() + 1); | |
| this.update_page(); | |
| } |
これでページネーション機能が実装されました。
例えば最初のページへの移動であれば this._dataSearcher.movePage に 1 を与えるだけですし、最後のページへの移動は this._dataSearcher.getTotalPages() を与えるだけです。ごく簡単にグリッドに対してページネーションが使えるようになります。
実際に動いているデモはこちらにあります。ぜひ試してみてください。
コメントは受け付けていません。