HTMLテーブルにフィルタリング機能を実装する「Filterable」

「Filterable」はHTMLのtableタグで作ったテーブルにフィルタリング機能を実装することのできるjQueryプラグインです。

Filterable

screenshot254

excelでは定番のテーブルのフィルタリング機能。HTMLのtableタグに適用できるプラグインはあまりないのではないでしょうか?少なくとも私は初めて出会いました。機能はただフィルタリングするのみのシンプルな作り。使い方をご紹介します。

 

車についてのテーブルのようです(Demoより)。Colorを”Blue”でフィルタリングしてみましょう。

screenshot256

するとこの通り。フィルタリングされました。

screenshot257

 

 

次に、Colorを”Silver”でフィルタリングしてみます。おっと、誤って”Si”しか入力していないのに、実行してしまいました。

screenshot258

 

そんな時でもワイルドカード機能が働き、しっかりフィルタリングしてくれます。すばらしいですね。

screenshot259

 

 

それでは「Filterable」の実装方法をご紹介します。このプラグインの難点は大量の外部ファイルを読み込むことです。。。それでは見ていきましょう。

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="../src/jquery.filterable.js"></script>

 

うーん、その数6個。多いですね。次にHTMLです。通常のtableタグ同様にマークアップしてください。

<div class="container">
  <table id="example-table" class="table table-striped table-hover table-condensed">
    <tr><th>Make</th><th>Model</th><th>Color</th><th>Year</th></tr>
    <tbody>
      <tr><td>Ford</td><td>Escort</td><td>Blue</td><td>2000</td></tr>
      <tr><td>Ford</td><td>Ranger</td><td>Blue</td><td>1990</td></tr>
      <tr><td>Toyota</td><td>Tacoma</td><td>Red</td><td>2012</td></tr>
      <tr><td>Ford</td><td>Mustang</td><td>Silver</td><td>2012</td></tr>
      <tr><td>Mercury</td><td>Sable</td><td>Silver</td><td>2002</td></tr>
    </tbody>
  </table>
</div>

 

CSSは以下の通り指定してください。

.filterable {
  color: inherit;
  border-bottom: inherit;
  cursor: hand;
  cursor: pointer;
  font-style: normal;
}

.filterable:hover {
  color: #5bb75b;
  border-bottom: inherit;
  font-style: normal;
}

.filterable-active {
  color: #5bb75b;
  font-style: italic;
}

.filterable-match {}

.filterable-no-match {
  display: none !important;;
}

 

JavaScriptは以下の1行です。

$('#example-table').filterable();

 

すると上記と全く同じ、テーブルを作ることができます。外部ファイル読み込みで処理が重くなるのが気にかかりますが、フィルタリング機能は珍しいのでぜひ参考にどうぞ。

 

Home > JavaScript > HTMLテーブルにフィルタリング機能を実装する「Filterable」

Return to page top