tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter

tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。

tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。

Multifilter

こういうの。デモを用意しました。

尚、データはなんちゃって個人情報を利用させて頂いています。

$('.foo').multifilter()

使い方もシンプル。上記のようにtableを指定。

<div class='filters'>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='名前' placeholder='名前' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='性別' placeholder='性別' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='誕生日' placeholder='誕生日' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='キャリア' placeholder='キャリア' />
    </div>
    <div class='clearfix'></div>
  </div>
</div>
<div class='container'>
  <table>
    <thead>
      <th>名前</th>
      <th>性別</th>
      <th>誕生日</th>
      <th>キャリア</th>
    </thead>

input要素のname属性とtableの列名をあわせればOKです。

ライセンスはMITとの事。

Multifilter