jQueryでテーブルをページング。 - ゴミ溜め＠技術系日常系雑文

ひっさびさの更新です。

わけあって、「テーブルにページ送り（ページング）を実装してみる - jQuery入門 - ポンクソフト」を参考にテーブルをページングするjavascriptを作った。

もとのソースに加えて、先頭ページ移動、末尾ページ移動と、ページ番号ボタンを表示するように改良した。

<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>jQueryによるテーブルのページ送り</title>
<script>
$(function() {
	var page = 0, page_last = 0, line = 15;
		// page      : カレントページ番号
		// page_last : ページ総数
		// line      : 表示行数

	// 起動時の処理。
	( function __construct() {

		// ページ総数を算出。
		page_last = Math.ceil( $("#list_body tr").length / line ) - 1;

		// ページコントローラにページ番号を挿入。
		for( var i=0; i<=page_last; i++ ) {
			$("#page_number").append( $("<li></li>").html(i+1) );
		}
	})();

	// 現在のページ番号に応じて、ページコントローラのスタイルを変更する関数。
	function set_ctrl_style(){

		// スタイルの初期化。
		$('#page_number').children().removeClass("current_page");
		$('#page_first, #page_prev, #page_next, #page_last').removeClass("terminal");

		// カレントページのスタイル設定。
		$("#page_number li").each(function(){
			if( $(this).html()-1 == page ) $(this).addClass("current_page");
		});

		// 先頭ページ・前ページ・次ページ・末ページ移動ボタンのスタイル設定。
		if( page == 0 ) {
			$('#page_before li').addClass("terminal");
		}
		else if( page == page_last ) {
			$('#page_after li').addClass("terminal");
		}

	}

	// 行を描画する関数。
	function draw() {
		$('#list_body tr').hide();
		$('#list_body tr:first, #list_body tr:gt('+　page * line +'):lt('+line+')').show();
		set_ctrl_style();
	}

	// ページ番号をクリックしたときの処理。
	$("#page_number li").click(function() {
		page = $(this).html()-1;
		draw();
	});

	// 先頭ページ移動ボタンをクリックしたときの処理。
	$('#page_first').click(function() {
		page = 0;
		draw();
	});

	// 末尾ページ移動ボタンをクリックしたときの処理。
	$('#page_last').click(function() {
		page = page_last;
		draw();
	});

	// 前ページ異動ボタンをクリックしたときの処理。
	$('#page_prev').click(function() {
		if (page > 0) page--;
		draw();
	});

	// 次ページ移動ボタンをクリックしたときの処理。
	$('#page_next').click(function() {
		if ( page < page_last ) page++;
		draw();
	});

	draw();
});
</script>
<style>
td, th {
  border: 1px solid black;
  padding: 2px;
}

#page_ctrl ul, #page_ctrl ul li {
	display: inline;
	margin: 0;
	padding: 0;
}
#page_before li, #page_after li, #page_number li {
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background: #f0f0f0;
	color: #666666;
	padding: 0 5px;
	margin: 0 2px;
}
#page_ctrl li:hover { background: #fafafa; }
#page_ctrl li.terminal:hover { background: #f0f0f0; }

/* Default スタイル */
#page_first, #page_prev, #page_number li, #page_next, #page_last {
  cursor: pointer;
}

/* 先頭あるいは末尾ページ表示中のボタンスタイル */
.terminal {
	color: #000000 !important;
	cursor: default !important;
	color: #dddddd !important;
}

/* カレントページのスタイル */
.current_page {
	background: #fafafa !important;
	font-weight: bold !important;
}
</style>
</head>
<body>

<div id="page_ctrl">
	<ul id="page_before">
		<li id="page_first">|&lt;</li>
		<li id="page_prev">&lt;</li>
	</ul>
	<ul id="page_number"></ul>
	<ul id="page_after">
		<li id="page_next">&gt;</li>
		<li id="page_last">&gt;|</li>
	</ul>
</div>

<table><tbody id="list_body">
	<tr><th>名前</th><th>消費ＭＰ</th></tr>
	<tr><td>メラ</td><td>2</td></tr>
	<tr><td>メラミ</td><td>6</td></tr>
	<tr><td>メラゾーマ</td><td>18</td></tr>
	<tr><td>メラガイアー</td><td>45</td></tr>
	<tr><td>ヒャド</td><td>3</td></tr>
<!-- 〜中略〜 -->
	<tr><td>ルーラ</td><td>0</td></tr>
	<tr><td>リレミト</td><td>3</td></tr>
	<tr><td>トラマナ</td><td>2</td></tr>
</tbody></table>


</body></html>