TinyTableの使い方 TinyTable

TinyTableの使用方法をご紹介しています。
TinyTableは、テーブル(表)にソート、ページの機能を追加するJavaScriptライブラリです。
ページ機能は、1ページに表示する行数、ページの移動、ページ番号の表示などの機能です。

公式サイト

サンプル

ダウンロードと設置

こちらからダウンロードして解凍します。
解凍後、csorterディレクトリを任意の場所に設置します。

JavaScriptの読み込みと設定

以下のタグを<head>内に記載します。
パスは環境により変更してください。

以下のタグを</body>の直前に記載します。
(適用させるテーブルの下であれば<body>内のどこでもかまいません。)

適用方法(ソート機能)

table属性にidを割り当てます。
見出し部分をthead要素、内容をtbody要素で囲います。
なお、tbody要素内にth要素を含めるとオプションで設定可能なclass名が無効になりますのでご注意ください。

ソート機能を実装しない項目は class="nosort"を設定します。

ページ機能の設定(最大行数)

1ページの最大行数の設定は以下のオプションを設定します。
※ 「読み込み」でsorter.init();を設定した部分に追加します。

最大行数を変更するプルダウンメニューを設置する場合は以下のようにします。
※ optionは任意でかまいません。

ページ機能の設定(ページ移動)

ページを移動するボタンを設置する場合は以下のようにします。

HTML

JavaScript

ページ機能の設定(ページ番号の表示)

ページ番号を表示する場合は以下のオプションを設定します。

表示したい場所にIDを付加したタグを設置します。

オプション

class名の設定についてはほぼすべての設定を行わないと、undefinedと出力されてしまいますのでご注意ください。

オプション名 説明
sorter.head 見出し(th要素)行のclass名を設定します。
sorter.asc 昇順のclass名を設定します。
sorter.desc 降順のclass名を設定します。
sorter.even 奇数行のclass名を設定します。tr要素に付加されます。
sorter.odd 偶数行のclass名を設定します。tr要素に付加されます。
sorter.evensel ソートされている列の奇数行先端セルのclass名を設定します。
sorter.oddsel ソートされている列の偶数行先端セルのclass名を設定します。
sorter.currentid 現在のページ数のclass名を設定します。
sorter.limitid 最大ページ数のclass名を設定します。
sorter.paginate ページの機能の有無です。初期値はfalseです。
sorter.pagesize 1ページの最大行数です。sorter.paginateがtrueの場合に設定します。