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

使用方法

<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

<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 type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
	sorter.init("id名",1);
</script>

<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>

サンプル

5 10 20 50 100 件／ページ

現在のページ of