TinyTable | Webサイト制作支援

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

※ 公式サイトは閉鎖されました。
現在ライブラリのダウンロードを行うことができません。

ダウンロードと設置
JavaScriptの読み込み
適用方法（ソート機能）
ページ機能の設定（最大行数）
ページ機能の設定（ページ移動）
ページ機能の設定（ページ番号の表示）
オプション

ダウンロードと設置

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

JavaScriptの読み込み

次を<head>内に記述します。
パスは環境により変更してください。

HTML

適用方法（ソート機能）

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

HTML

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

HTML

次のJavaScriptコードを記述します。

JavaScript

sorter.initメソッドの第二引数は適用初期状態でソートを行う列番号を指定します。
初期で必要なければ第二引数は任意なので指定しなくても問題ありません。

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

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

JavaScript

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

HTML

JavaScript

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

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

HTML

JavaScript

// 先頭
								document.getElementById('first-button').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;
									}
								};

// 前のページへ
								document.getElementById('prev-button').onclick = function(e) {
									sorter.move(-1);

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

// 次のページへ
								document.getElementById('next-button').onclick = function(e) {
									sorter.move(1);

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

// 最後
								document.getElementById('last-button').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;
									}
								};

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

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

JavaScript

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

HTML

オプション

次のオプションが用意されています。
なお、オプションにある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の読み込み

適用方法（ソート機能）

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

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

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

オプション