データの追記読み込みに対応するテーブル「StreamTable.js」
StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.05.47.1371019292.png)
テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.06.00.1371019296.png)
ページネーションもどんどん増えていきます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.06.29.1371019302.png)
検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.06.53.1371019308.png)
仕組みとしてはAjaxでデータを取得しています。
StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています。データの描画は必要に応じて行われる形なので、最初のデータがすぐに表示されるのはユーザにとって便利な仕組みではないでしょうか。
MOONGIFTはこう見る
Webアプリケーション化が進む中で、こうやって表示とデータ授受部分が切り離されていくのは良い仕組みだと思っています。特に業務システムにおいてはユニークなURLである必要もそれほどなく、利用ブラウザも限定できるのでAjaxを多用していくべきではないでしょうか。
データと表示部が切り分けられればWeb APIとしてWebブラウザ以外での利用（例えばExcelなど）も考えられるようになります。開発者にとっても変更が多くないRESTfulなインタフェース開発の方が生産性も良くなるはずです。