skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

テーブルの表組みにページネーションをつける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>

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

記事作成：2009年04月28日

前の記事：ちょっとうざい（？）入力ヒントJavaScript「jQuery Type-Writing Hint」
次の記事：画像をポラロイド風にするJavaScript「jPolaroid」