hifiveのデータグリッドライブラリを使いこなす（7）「データの表示件数を変更する」

大量のデータを表示する際に要望に上がってくるのがデータの表示件数を変更する機能です。ページネーションと組み合わせて使いますが、今回はまずデータ件数の変更について紹介します。

実際に動いているデモはこちらにあります。また、動いている画像は下記になります。

データの表示件数を指定する

まずHTML側でデータの表示件数を指定できるようにします。今回は次のようなドロップダウンを用意しました。

https://gist.github.com/82d77a1c1992d375c9f3526c4a72a4ff

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

hifiveのグリッドライブラリにおいてデータの表示件数を制御するのは gridController.dataSearcher になります。次のように用意します。

https://gist.github.com/3998b990690aa6b9e567186bd5132519

さらに初期化の変数を変更します。pagingをtrueにし、pageSizeが初期化時の表示件数になります。

https://gist.github.com/62c6e1acb2d9190d54d169af301214fa

動的に表示件数を変更する

そしてドロップダウンで件数を指定した際に、動的にグリッドの表示件数を変更します。

https://gist.github.com/60bd247234332b645cca00451f852485

このように、件数を数値で渡すのがポイントです。実際の表示はgridControllerが行ってくれます。

データはすでにコントローラ内部にありますので、件数変更は素早く行われます。次回はページネーションの実装を紹介します。

データ件数の変更デモ