第14回 テーブルにページ送り（ページング）を実装してみる – jQuery入門
2009 年 10 月 2 日 投稿者: naga3
大量の行が並んだテーブルは見づらいものです。そんなときもjQueryを使うと、とても簡単にページ送りを実装することができます。そんなわけでよくあるページ送りを作ってみたわけですが、今回も車輪の再発明です。ちゃんとしたものが欲しければこことかここでどうぞ。
ページ送りのデモ
左右の矢印をクリックするとページ送りできます。テーブルの内容は現在ドラクエ９にハマっているのでこんなのですが、お気になさらず。ソース
以下のソースではtrの行がかなり省略してあるので、自分で試してみるならば行を増やしてください。実際のソースは以下にあるので必要ならば右クリックで保存してください。pagination.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
$.fx.off = true;
var page = 0;
function draw() {
$('#page').html(page + 1);
$('tr').hide();
$('tr:first, tr:gt(' + page * 10 + '):lt(10)').show();
}
$('#prev').click(function() {
if (page > 0) {
page--;
draw();
}
});
$('#next').click(function() {
if (page < ($('tr').size() - 1) / 10 - 1) {
page++;
draw();
}
});
draw();
});
</script>
<style type="text/css">
td, th {
border: 1px solid black;
padding: 2px;
}
#prev, #next {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<span id="prev">＜</span> <span id="page"></span> <span id="next">＞</span>
<table>
<tr><th>名前</th><th>消費ＭＰ</th></tr>
<tr><td>メラ</td><td>2</td></tr>
<tr><td>メラミ</td><td>6</td></tr>
・・・・・省略・・・・・
<tr><td>リレミト</td><td>3</td></tr>
<tr><td>トラマナ</td><td>2</td></tr>
</table>
</body>
</html>
プログラムの解説
実際はテーブルの全ての行が表示されているのですが、現在表示すべき10行を可視化、その他の行を不可視とすることによってページ送りがされているように見せかけています。
$.fx.off = true;
この一行でjQueryのアニメーションをソース全体で無効にしています。行の可視・不可視の処理を行うときにアニメーションが入ると遅くなるので。
var page = 0;
現在表示しているページ番号です（0が先頭ページ）。レキシカル変数なので$(document).ready関数が終了した後も有効でclickイベントなどの内部で使うことができます。JavaScriptって不思議ですね。
function draw() {
・・・・・・
}
描画処理はページを開いたとき、「＜」を押したとき、「＞」を押したときの３箇所で呼ばれるのでdraw関数としてまとめてあります。
$('#page').html(page + 1);
draw関数ではまず、現在のページ数を
<span id="page"></span>
の部分に書き込んでいます。次に
$('tr').hide();
テーブル全体を隠し、
$('tr:first, tr:gt(' + page * 10 + '):lt(10)').show();
対象となる10行だけを表示しています。「tr:first」は最初のtr要素、すなわちテーブルのヘッダ部分なので常に表示対象となります。それに加え「tr:gt(' + page * 10 + ')」でtr要素の最初から page * 10 番目以降の要素を取り出し、さらにその中から「:lt(10)」で10番目以前の要素を取り出しています。
$('#prev').click(function() {
if (page > 0) {
page--;
draw();
}
});
「＜」が押されたときの処理です。最初のページでなければページ番号をひとつ減らし、画面を描画します。
$('#next').click(function() {
if (page < ($('tr').size() - 1) / 10 - 1) {
page++;
draw();
}
});
「＞」が押されたときの処理です。最後のページでなければページ番号をひとつ増やし、画面を描画します。「$('tr').size()」で要素数が取得できるので、そこから最後のページであるかどうかを計算しています。