読者です 読者をやめる 読者になる 読者になる

ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

jQueryでテーブルをページング。

HTML jQuery javascript

ひっさびさの更新です。

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

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

車輪の再発明の再改良です。

DEMO

<!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>消費MP</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>