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