業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。

TableFilterの使い方

一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。

リアルタイムではないようですが、そこは改造できるでしょう。

入力はテキストだけでなく、ドロップダウンなども使えます。

より複雑に、ページネーションなども駆使したデモです。

フィルタリングとマルチセレクトを合わせたパターン。

TableFilterを使うことで大量のデータの中から必要なものだけを素早くピックアップできるようになります。覚えておくと使える場面が多そうなライブラリです。

TableFilterはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Home | TableFilter koalyptus/TableFilter: A Javascript library making HTML tables filterable and a bit more :)