2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!

表組みで縦に長くなると、もう最初と最後の関連性なんてわからなくなります。
今回紹介するJavaScriptはソートに加え表示件数を制御、ページャー付きと高機能なものが、わずか2.5kbで可能です。
via:TinyTable JavaScript Table Sorter
2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!サンプル

使用方法
TinyTable JavaScript Table Sorterからファイル一式をダウンロードします。
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

上記をhead内に書き込んだ後、テーブルを記述します。
<table cellpadding="0" cellspacing="0" border="0" id="id名" class="sortable">
<thead>
<tr>
<th class="nosort"><h3>ID</h3></th>
<!-- classにnosortでソートされません -->
<th><h3>Name</h3></th>
<th><h3>Phone</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ezekiel Hart</td>
<td>(627) 536-4760</td>
</tr>
<!-- 以下テーブル分 -->
</tbody>
</table>
<!-- ここからコントローラ部分 -->
<div id="controls">
<!-- ここから表示項目数調整 -->
<div id="perpage">
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>件/ページ</span>
</div>
<!-- ここからページャー調整 -->
<div id="navigation">
<img src="first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div id="text">現在のページ <span id="currentpage"></span> of <span id="pagelimit"></span></div>
</div>

最後に以下のscriptを書き込みます。
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.init("id名",1);
</script>

最低限ですと上記で十分ですが、以下のようなオプションを加えられます。
これによりclassやidが振られ、cssにより自動でサンプルのような見た目も高機能にできます。
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("id名",1);
</script>

2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!サンプル

sponsors

「2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!」をシェアする

記事作成:
記事URL:

TOP > > > 2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!