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() を与えるだけです。ごく簡単にグリッドに対してページネーションが使えるようになります。
実際に動いているデモはこちらにあります。ぜひ試してみてください。
コメントは受け付けていません。