Table.js と Fixed Table の比較

※2016/02/28サンプルプログラムのエラー修正しました。

前回も書きました、「Webアプリ（jQuery、Ajax）で部門間の質問・回答システム」は、テーブル形式のデータ表示に、jQueryとTable.jsを利用させて頂きました。

このTable.jsで作ったテーブルは一度に扱うデータが１００件程度までは順調に動作していました。

気を良くして、別のシステムも機能アップと操作性改善を目的にjQueryとTable.jsで作り直したところ、動作が重く使えませんでした。
色々と調べた結果、テーブル表示のレンダリングにとても負荷が掛かっている事が判りました。
確かに、扱うデータ量が多く、一度に２千件程度のデータを読み込んでテーブルを２０件位でページ切り替えしていました。


対策はテーブルのレイアウトを固定する事でレンダリングを短時間で処理させることでした。
つまり、Table.jsを使わず、Fixed Tableを作り、フィルターやソート機能等の必要な機能を作り込む事です。
作り込む手間を考えるとチョット気の重い作業でしたが、完成して、考えていた以上にレスポンスが良く満足出来ました。


この２つの比較をサンプルとして作りました。

JQUERY & FIXED TABLE によるデータ一覧表示サンプル


このサンプルはMySQL、PHP、jQuery、Ajax、が稼働出来て、無料で広告なしの「chobi net Freeプラン」を使わせて頂いています。
Freeなので容量制限は有りますが、困った時にはシッカリとサポートしてくれる管理人様がいますので安心して使えます。
思い出しました、トップのindexページは６ケ月以内に更新しないと、利用解除のメールが来ます。
詳しくはchobi netのサポートページを参照ください。


以上