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の場合に設定します。 |