TinyTableの使い方 | Webサイト制作支援

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

公式サイト

サンプル

ダウンロードと設置

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

JavaScriptの読み込みと設定

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

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

適用方法（ソート機能）

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

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

ページ機能の設定（最大行数）

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

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

ページ機能の設定（ページ移動）

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

HTML

JavaScript

var firstButton = document.getElementById('first-button'),
								prevButton  = document.getElementById('prev-button'),
								nextButton  = document.getElementById('next-button'),
								lastButton  = document.getElementById('last-button');

// 先頭
							firstButton.onclick = function(e) {
								sorter.move(-1, true);

if (e.preventDefault) {
									e.preventDefault();
								} else {
									e.returnValue = false;
								}
								if (e.stopPropagation) {
									e.stopPropagation();
								} else {
									e.cancelBubble = true;
								}
							};

// 前のページへ
							prevButton.onclick = function(e) {
								sorter.move(-1);

if (e.preventDefault) {
									e.preventDefault();
								} else {
									e.returnValue = false;
								}
								if (e.stopPropagation) {
									e.stopPropagation();
								} else {
									e.cancelBubble = true;
								}
							};

// 次のページへ
							nextButton.onclick = function(e) {
								sorter.move(1);

if (e.preventDefault) {
									e.preventDefault();
								} else {
									e.returnValue = false;
								}
								if (e.stopPropagation) {
									e.stopPropagation();
								} else {
									e.cancelBubble = true;
								}
							};

// 最後
							lastButton.onclick = function(e) {
								sorter.move(1, true);

if (e.preventDefault) {
									e.preventDefault();
								} else {
									e.returnValue = false;
								}
								if (e.stopPropagation) {
									e.stopPropagation();
								} else {
									e.cancelBubble = true;
								}
							};

ページ機能の設定（ページ番号の表示）

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

表示したい場所に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の場合に設定します。

TinyTableの使い方 TinyTable

ダウンロードと設置

JavaScriptの読み込みと設定

適用方法（ソート機能）

ページ機能の設定（最大行数）

ページ機能の設定（ページ移動）

HTML

JavaScript

ページ機能の設定（ページ番号の表示）

オプション