はじめに

extablefilterは、テーブルのフィルタリングを画面実装したいときに便利なjqueryプラグインです。
「input入力すると、テーブルが動的に絞り込みされる」実装を実現します。
あまりにもよくお世話になる(この時代でもなお)ので備忘録を兼ねて紹介させてください。
MITライセンスです。

使い方

シンプルな例

jquery読み込み
extablefilterを読み込み
inputやtableを含むHTMLを書く
input formとtableに対してexTableFilterを実行

という順番になります。以下が例です。

<!-- スクリプト読み込み -->
<!-- The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking -->
<script  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="http://www.cyokodog.net/jquery.ex-table-filter/jquery.ex-table-filter.js"></script>

<!-- ページの中身 -->
<p>
  <input type="text" id="myfilter" class ="input form-control">
</p>
<p>
<table id="mytable" border=1 class="table table-striped">  
    <thead>
        <tr><th>No</th><th>英語</th><th>日本語</th></tr>
    </thead>
    <tbody>
       <tr><td>1</td><td>first</td><td>１番目</td></tr>
       <tr><td>2</td><td>second</td><td>２番目</td></tr>
    </tbody>
</table>
</p>

<!-- フォームIDがmyfilterのinputに対して、テーブルIDがmytableの項目のフィルタリングを有効にする -->
<script>
jQuery('#mytable').exTableFilter('#myfilter');
</script>

Codepen

※例はbootstrapで見た目を整えています。

いずれかの列に含まれる文字列に対し、ユーザのテキスト入力でフィルタリングする

See the Pen Untitled by Naz (@nazunamix) on CodePen.

自動生成されたチェックボックス、ラジオ、セレクターでフィルタリングする

See the Pen extablefilter2 by Naz (@nazunamix) on CodePen.

おわりに

この他にも色々とカスタマイズできるオプションがあるので、ぜひ公式ページをご確認ください。
jqueryが許される環境であればお好みで…

テーブルの動的フィルタ機能を雑に実装しよう extablefilter (jQueryプラグイン)