やりたいこと
テーブルと検索フォームがあって、デフォルトではテーブルにはすべてのデータが表示されているが、検索フォームに文字を入力すると、入力したワードとマッチした
行のみが表示されるようにしたい。Ajax？そんなんいらんわボケ
それを一発で実現してくれるJavascriptライブラリがcyokodog/jquery.ex-table-filter
環境
- jQuery依存
- 本家では1.xを使っていたが3系のバージョンでも動作確認できた
サンプル
See the Pen pKMbod by thr3a (@thr3a) on CodePen.
ダウンロード
以下からZipをダウンロードして適当に解凍すればおｋ
cyokodog/jquery.ex-table-filter: テーブルフィルタリング機能を提供する jQuery プラグイン
コード
サンプルを見たほうが早いが、実際のJS部分はたったの一行 #mytableがターゲットのテーブルで#myfilterが検索フォームのinput要素だとして、
$('#mytable').exTableFilter('#myfilter');
って書くだけ。
ただし、デフォルトでは全カラム(列)が対象になってしまっているので、特定のカラムのみに絞りたい場合は
$('#mytable').exTableFilter({ filters : { 1 : '#myfilter' } });
のように書く。１はカラムのindex番号。サンプルでは名前に相当する。
ほかにもたくさん機能がある。サンプルも充実しているので公式サイトを確認すべし
