動かざることバグの如し

近づきたいよ 君の理想に

テーブルを検索フィルタリングしてくれるJSライブラリ「jquery.ex-table-filter」

やりたいこと

テーブルと検索フォームがあって、デフォルトではテーブルにはすべてのデータが表示されているが、検索フォームに文字を入力すると、入力したワードとマッチした 行のみが表示されるようにしたい。Ajax?そんなんいらんわボケ

それを一発で実現してくれるJavascriptライブラリがcyokodog/jquery.ex-table-filter

環境

  • jQuery依存
  • 本家では1.xを使っていたが3系のバージョンでも動作確認できた

サンプル

See the Pen pKMbod by thr3a (@thr3a) on CodePen.

ダウンロード

以下からZipをダウンロードして適当に解凍すればおk

cyokodog/jquery.ex-table-filter: テーブルフィルタリング機能を提供する jQuery プラグイン

コード

サンプルを見たほうが早いが、実際のJS部分はたったの一行 #mytableがターゲットのテーブルで#myfilterが検索フォームのinput要素だとして、

$('#mytable').exTableFilter('#myfilter');

って書くだけ。

ただし、デフォルトでは全カラム(列)が対象になってしまっているので、特定のカラムのみに絞りたい場合は

$('#mytable').exTableFilter({
  filters : {
    1 : '#myfilter'
  }
});

のように書く。1はカラムのindex番号。サンプルでは名前に相当する。

ほかにもたくさん機能がある。サンプルも充実しているので公式サイトを確認すべし

汎用性重視のテーブルフィルタリング系 jQuery プラグイン | CYOKODOG