Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。

jQuery-KingTableの使い方

jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。

並び替えると小さなアイコンが出ます(今回はGreenの横にアイコンがあります)。

カラーテーマを変更しました。

検索するとヒットした部分がハイライトします。

表示するカラムを絞り込めます。

表示をテーブルではなくカードに変更しました。

さらにパネルにも。

フィルタリング条件の追加もできます。

jQuery-KingTableは多機能なので、業務要件によってはこれで十分というケースは多いのではないでしょうか。大量のデータを表示した場合にも、フィルタリングを使うことで効率的な業務が可能になるでしょう。

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

jQuery-KingTable RobertoPrevato/jQuery-KingTable