今日の人気記事

  1. 指定した要素を上下左右にスクロール「Marquee」
  2. アプリのようにスライドするレスポンシブメニュー「mmenu」
  3. 複数の画像をクロスフェードで切り替える「Image Rotator」
  4. select要素を検索できるように「Chosen」
  5. 同じ内容の入力フォームを追加・削除「Repeater」

テーブルにページャーを「PaginateMyTable」

スポンサーリンク

指定したテーブル要素にページャーを実装できるプラグイン「PaginateMyTable」を紹介します。

jQueryプラグイン「PaginateMyTable」

このプラグインを使えば、だらだらと長く並んだ見にくいテーブルにページャを設置し、簡単にテーブルを見やすくすることがすることができます。

まーなんということでしょう~。また、分割する行数、ページャーの位置(上、下)も指定できるので、便利です。

スポンサーリンク

デモでは、このプラグインのデフォルト(オプション指定なし)である5行でテーブルを分割し、ページャーをテーブルの下に設置しています。

「PaginateMyTable」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)