テーブルにページ送り（ページング）を実装してみる - jQuery入門
目次
- jQuery入門
- jQueryのインストール・簡単な使い方
- クイズゲームの作り方
- 秘密の暗号を作ってみよう（たぬき暗号）
- アクションゲームを作ってみよう（ぬりかべ）
- 画像を使ったジグソーパズルを作ってみよう
- もぐらたたきっぽいゲーム
- ドラッグ可能なポップアップウインドウを作ろう
- jQuery UI Sortableで１ラインオセロゲーム
- ブラウザ全体をブロックしてみる
- Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
- 発生したイベントの状態を保持・保存する6つのパターン
- Ajaxを利用したシンプルなイメージギャラリーを作ってみる
- テーブルにページ送り（ページング）を実装してみる
- jQuery UI Draggableを使って付箋(sticky)を作ってみる
- カラムでソートできるテーブルを自作してみる
- テーブルを使ったシンプルなドット絵エディタを作ってみる
- iPhoneのようにマウスではじいてスクロール（フリックスクロール）を実装してみる
- テキストフィールドの数値をマウスの上下移動で増減する
- iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
- iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
- リアルタイムプレビュー付きのHTMLエディタを作ろう
- 保存できる付箋を作ってみる(Cookie、localStorage）
ページング
大量の行が並んだテーブルは見づらいものです。そんなときもjQueryを使うと、とても簡単にページ送りを実装することができます。そんなわけでよくあるページ送りを作ってみたわけですが、今回も車輪の再発明です。
ページ送りのデモ
左右の矢印をクリックするとページ送りできます。テーブルのネタはドラクエ９の魔法です。
実行結果
ソース
trの行が長いので省略してあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>jQueryによるテーブルのページ送り</title>
<script>
$(function() {
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>
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行を可視化、その他の行を不可視とすることによってページ送りがされているように見せかけています。
var page = 0;
現在表示しているページ番号です（0が先頭ページ）。レキシカル変数なので$(document).ready関数が終了した後もclickイベントなどの内部で有効になります。
function draw() {
・・・
}
描画処理は「ページを開いたとき」「＜を押したとき」「＞を押したとき」の3箇所で呼ばれるので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()」で要素数が取得できるので、そこから最後のページであるかどうかを計算しています。
まとめ
このように、jQueryを使えば一見複雑そうなページ送りもシンプルに実装することができます。サーバサイドの言語と組み合わせてAjaxを使えば十分実務にも使うことができます。
ツイート
そっか0