LINEで送る
Pocket

スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。

テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。

今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。

Flexigrid – Web 2.0 Javscript Grid for jQuery

カラムのリサイズやソート、ページングなどなど、たった数行のコードを追加するだけで、とってもフレキシブルなテーブルが完成します!

Flexigrid - Web 2.0 Javscript Grid for jQuery

Expand table rows with jQuery – jExpand plugin

折りたたみができるプラグインです。いろいろと使い道がありそうですね。

Expand table rows with jQuery - jExpand plugin

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQueryとHTML5をつかって、テーブルに入力された数値をグラフにビジュアライズしてくれます。テーブル内の数値はブラウザ上で変更する事も可能で、グラフも同時に変更されます。

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jquery.csv2table.js

CSVファイルをテーブル表示してくれるjQueryのプラグイン。エクセルは使えるけど、HTMLはちょっと…。といったクライアントの方に重宝しそうなプラグインですね。

jquery.csv2table.js

jqGrid

ソートやページングなど様々な機能が実装できます。

jqGrid

Ingrid, the jQuery Datagrid.

こちらも同様に、ソートやページングなどのテーブル

Ingrid, the jQuery Datagrid.

jQuery plugin: Tablesorter 2.0

すっきりとしたデザインで見やすいソート機能

jQuery plugin: Tablesorter 2.0

jQuery treeTable 2.0

ツリー表示が実装できます。

jQuery treeTable 2.0

HeatColor, a jQuery plugin

とってもきれいなヒートカラーをテーブルに実装

HeatColor, a jQuery plugin

tableRowCheckboxToggle

テーブルの列ごとチェックボックスに反応させることができます。

tableRowCheckboxToggle

DataTables

こちらもソートやページングが実装できるjQueryプラグインです。

DataTables

TableEditor

編集可能なテーブルを作ることができます。

TableEditor

TinyTable JavaScript Table Sorter – 2.5KB

わずか2.5KBでソートやページング機能が実装できるプラグイン

TinyTable JavaScript Table Sorter – 2.5KB

tableFilter

カラムの上部に配置されているボックスに文字を入力して、絞り込むことができます。

tableFilter

jQuery Column Filters

こちらも、データを絞り込む事ができるフィルター機能

jQuery Column Filters

Allan Jardine | Reflections | KeyTable

タブキーでセルの選択を移動させることができます。

Allan Jardine | Reflections | KeyTable

Drag and drop table content with JavaScript

ドラッグ アンド ドロップが可能になります。

Drag and drop table content with JavaScript

Table Drag and Drop JQuery plugin

こちらもドラッグ アンド ドロップ可能になるjQueryプラグインです。

Table Drag and Drop JQuery plugin

Similar Posts:

LINEで送る
Pocket


6 Thoughts on “テーブルに実装できるjQueryプラグインいろいろ”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です