テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」

たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。
そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。

使用方法

Table Paginationからjquery.tablePagination.0.1.jsをjQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.tablePagination.0.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
            var options = {
              currPage : 1,  //最初に表示するページ
              optionsForRows : [1,5,10], //表示する行数
              rowsPerPage : 5 //デフォルト表示行数
            }
            $('#id名').tablePagination(options);

});
</script>

上記を記述後、テーブルにidを振れば完成です。


<table id="id名">
	<thead>
		<tr>
			<td>Item</td><td>Cost</td><td>Description</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>No. 1</td><td>$1.50</td><td>Fake Description</td>
		</tr>
		以下行分
	</tbody>
</table>

サンプル

Item	Cost	Description
No. 1	$1.50	Fake Description
No. 2	$2.50	Made up word
No. 3	$6.63	Something is a Something
No. 4	$1.20	Blah Blah
No. 5	$1.11	Great one dude
No. 6	$6.42	Have no idea what to type
No. 7	$2.52	Sometimes you feel like a nut
No. 8	$4.51	Snickers
No. 9	$1.21	That's mmm mmm good
No. 10	$0.99	Pizza
No. 11	$3.99	Root Beer Floats
No. 12	$5.99	Large bag of Gumdrops

Javascriptサンプルページ一覧

skuare.net