テーブルにページャーを「PaginateMyTable」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定したテーブル要素にページャーを実装できるプラグイン「PaginateMyTable」を紹介します。
jQueryプラグイン「PaginateMyTable」
このプラグインを使えば、だらだらと長く並んだ見にくいテーブルにページャを設置し、簡単にテーブルを見やすくすることがすることができます。
まーなんということでしょう～。また、分割する行数、ページャーの位置（上、下）も指定できるので、便利です。
スポンサーリンク
デモでは、このプラグインのデフォルト（オプション指定なし）である5行でテーブルを分割し、ページャーをテーブルの下に設置しています。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PaginateMyTable - jQueryプラグインまとめのカルマ</title>
<link type="text/css" rel="stylesheet" href="PaginateMyTable.css" />
</head>
<body>
<div>
<h1>PaginateMyTableのデモでーす。</h1>
</div>
<table>
<tr><td>
<table class="mytable">
<thead>
<tr>
<th>バージョン</th><th>コードネーム</th><th>リリース</th><th>パッケージ数</th>
</tr>
</thead>
<tr><td>1.1</td><td>buzz</td><td>1996</td><td>474</td></tr>
<tr><td>1.2</td><td>rex</td><td>1996</td><td>848</td></tr>
<tr><td>1.3</td><td>bo</td><td>1997</td><td>974</td></tr>
<tr><td>2.0</td><td>hamm</td><td>1998</td><td>1500</td></tr>
<tr><td>2.1</td><td>slink</td><td>1999</td><td>2250</td></tr>
<tr><td>2.2</td><td>potato</td><td>2000</td><td>3900</td></tr>
<tr><td>3.0</td><td>woody</td><td>2002</td><td>8500</td></tr>
<tr><td>3.1</td><td>sarge</td><td>2005</td><td>15400</td></tr>
<tr><td>4.0</td><td>etch</td><td>2007</td><td>18000</td></tr>
<tr><td>5.0</td><td>lenny</td><td>2009</td><td>28000</td></tr>
<tr><td>6.0</td><td>squeeze</td><td>2011</td><td>29000</td></tr>
<tr><td>7.0</td><td>wheezy</td><td>2013</td><td></td></tr>
</table>
</td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="PaginateMyTable.js"></script>
<script>
$(document).ready(function() {
$(".mytable").paginate();
});
</script>
</body>
</html>
スポンサーリンク