tableのソート、フィルタ、ページング、編集ができるjQueryプラグイン「footable.js」を使ってみた感想

以前、Version2の時に利用していたjQueryのプラグインfootableがVersion3になっていたので再度利用してみました。

version2の時よりもエディット機能が実装されていたりページの表示件数をユーザーが変更できる機能が追加されていたり、カラムごとのフィルタリング機能が追加されていたりするようです。

githubからダウンロードして、zipを解答後「compiled」フォルダ内の「footable.core.standalone.css」と「footable.js」のみ利用しHTMLファイルの中で読み込みました。


<link rel="stylesheet" href="./css/footable.standalone.css">
<script src="./js/footable.js"></script>

tableタグには以下のようにclassをつけて
ページャー機能を有効にするなら「data-paging=”true”」
フィルタ機能を有効にするなら「data-filtering=”true”」
ソートを有効にするなら「data-sorting=”true”」
1ページに表示する件数を15件にするなら「data-paging-size=”15″」の
1ページに表示するページャーの数字を5ページまでにするなら「data-paging-limit=”5″」
など様々なオプションがあるのでこれらを記述し


<table class="table" data-paging="true" data-filtering="true" data-sorting="true" data-paging-size="15" data-paging-limit="5">

scriptタグ内で以下のように有効にしてあげるだけで機能モリモリのテーブルが完成します。


<script>
jQuery(function($){
  $('.table').footable();
});
</script>

Edit機能(行の編集機能)を有効にする場合にはscriptタグ内の記述はもう少し長くなります。詳細は公式サイトのComponentsを参照してください。サンプルのソースも参考になります。

機能はモリモリではありますが、その分ソースコードもなかなか長く中身を把握していないと改良するのが難しい部分もあります。
私が困った点としては

  • 編集機能有効時には構造上テーブルの左右にborderをいれることが難しかった。(編集すると右端にカラムが増えることと、「data-breakpoints=”xs”」でスマホやタブレット表示の際に表示するカラムを変更していたので)
  • ソート有効時にはdeta-typeをnumberにしておけば「10」や「1」を正しく数字順にソートするが「row1」、「row2」、「row12」といったカラムの場合は「row1 → row12 → row2」とソートしてしまう。
  • ページ表示時にデータベース上のデータを参照テーブルに表示。その後、一定間隔でデータベースを参照し追加された場合は行を挿入する。という処理を行ったが、追加された行にソートやフィルタを有効にしたい場合にはfootableをredrawする必要があり、その処理が若干遅い。
  • jQueryのversionが3だと挙動がおかしい部分があり、1.xxを使用しなければいけない。
  • version2と違い、フィルタやeditボタンがテーブル内に組み込まれており、CSSによるデザインの変更がしにくい。
  • 行数が数百行くらいならなんとかいけるが数千程度になるとクライアント側のスペックによってもっさりする。(JavaScriptで行っているので仕方ないが)

などがありました。
とはいえ、簡単なテーブルをサンプル通りに使うのであれば非常にいいjQueryプラグインだと思います。
かなり改良をしたい場合には1から作ったほうがいいのかもしれません。

また、類似のjQueryプラグインとしては以下のものがあります。
Data Tablesが最も有名でしょうか。

tablesorter
https://mottie.github.io/tablesorter/

DataTables
https://datatables.net/

jqgrid
http://www.trirand.com/blog/jqgrid/jqgrid.html

tablesort
http://tristen.ca/tablesort/demo/

汎用性を重視したテーブルフィルタリング系の jQuery プラグイン
http://www.cyokodog.net/blog/extablefilter/

jTable.org
http://www.jtable.org/hh

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です