jQueryとPHPで大きなページナビを作る-公開スクリプト

2011/08/03 2011/08/06

PHPのPEARライブラリにはページング機能を実装するPagerクラスがあります。Googleの検索ページでは、ヒット数が多くて最初のページに載せきれない結果を、複数ページに渡って表示していますが、Pagerクラスを使えばそれと同じことを実現することができます。前回PHPとjQueryで連携して作成したページナビを紹介しましたが、今回そのスクリプトを公開します。 ⇒PHPとjQueryによるビッグサイズのページナビ ファイル構成 jquery.php-pagination/ 　｜　｜―――――｜――――――――――――――｜　｜　　　　　｜　　　　　　　　　　　　　　｜ index.php　　css　　　　　　　　　　　　　　js 　　　　　　　｜　　　　　　　　　　　　　　｜　　　　　　jquery.php-pagination.css　　jquery.php-pagination.js jquery.php-paginationというフォルダに、PHPファイル１とCSSファイル１、JavaScriptファイル１の計３つのファイルが含まれています。これとjQuery、jQuery UIのJavaScriptファイルとjQuery UIテーマのCSSファイルがあれば実装できます。最初にindex.phpを見ていきますが、これは長いのでいくつかに区切ってコードを載せていきます。

index.php（１）

 
<?php

/* PEARライブラリのPagerクラスが必要 */
require_once "Pager/Pager.php";

/* キャラクターデータの配列 */
$char_data = array(
	array(
		'id' => 'ryu',
		'name' => 'リュウ',
		'age' => '30',
		'special' => '波動拳'
	),
	array(
		'id' => 'ken',
		'name' => 'ケン',
		'age' => '30',
		'special' => '昇龍拳'
	),
	array(
		'id' => 'guile',
		'name' => 'ガイル',
		'age' => '35',
		'special' => 'サマーソルトキック'
	),
	array(
		'id' => 'zangief',
		'name' => 'ザンギエフ',
		'age' => '35',
		'special' => 'スクリュードライバー'
	),
	array(
		'id' => 'ehonda',
		'name' => 'E.ホンダ',
		'age' => '35',
		'special' => '百裂張り手'
	),
	array(
		'id' => 'chunli',
		'name' => '春麗',
		'age' => '25',
		'special' => 'スピニングバードキック'
	),
	array(
		'id' => 'blanka',
		'name' => 'ブランカ',
		'age' => '30',
		'special' => 'エレクトリックサンダー'
	),
	array(
		'id' => 'dhalsim',
		'name' => 'ダルシム',
		'age' => '40',
		'special' => 'ヨガフレイム'
	),
	array(
		'id' => 'vega',
		'name' => 'ベガ',
		'age' => '45',
		'special' => 'サイコクラッシャーアタック'
	),
	array(
		'id' => 'gouki',
		'name' => '豪鬼',
		'age' => '45',
		'special' => '瞬獄殺'
	)
);

まず始めにPEARのページング機能を使うためにPagerファイルを読み込みます。次に表示するデータを配列にして変数$char_dataに入れます。ここでは配列にデータを入れてしまっていますが、通常はデータベースなどからデータを取得すると思います。ただ、簡略化するためここでは配列にしているのです。

index.php（２）

 
/* ページング初期化のパラメーター */
$params = array(
	'itemData' => $char_data,
	'perPage' => 3,
	'delta' => 1,
	'mode' => 'Sliding',
	'urlVar' => 'page',
	'separator' => '|',
	'prevImg' => '<< 前へ',
	'nextImg' => '次へ >>',
	'spacesBeforeSeparator' => 1,
	'spacesAfterSeparator' => 1,
	'clearIfVoid' => false,
	'firstPagePre' => '',
	'firstPageText' => '先頭へ',
	'firstPagePost' => '',
	'lastPagePre' => '',
	'lastPageText' => '最後へ',
	'lastPagePost' => ''
);

/* Pagerクラス呼び出し */
$pager =& Pager::factory($params);

$page_data = $pager->getPageData();
$links = $pager->getLinks();
$page_range = $pager->getPageRangeByPageId();

?>

Pagerクラスのオブジェクトを作成するときに必要な引数を、配列$paramsにあらかじめ指定しておきます。特に重要な項目はデータ元を指定するitemDataと、一ページあたりのアイテム表示数を指定するperPage、ページナビ部分に表示するページ番号の数を指定するdeltaです。Pager機能の詳細についてはPHP Bookというサイトに載っています。 Pagerクラスで作成したオブジェクトは、変数$pagerに入れます。この$pagerからさらにリンク情報やページ番号の範囲などを取得して別の変数に入れておきます。以降はHTML部分です。

index.php（３）

 
<!-- HTML部分 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<title>jQueryとPHPで見やすいページネーションを作成 - ウィザード・コード | WIZARD-CODE</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" media="screen" />
 
<style type="text/css">
@import url("../../css/reset.css");
@import url("css/jquery.php-pagination.css");
</style>
</head>
<body>
<div id="wrapper">
	<div id="container">
		<ul id="data_list">
			<?php
			foreach ($page_data as $key=>$character)
			{
			?>
			<li>
				<span class="data_name">Name: <?= $character['name'] ?＞</span> 
				<span class="data_id">ID: <?= $character['id'] ?></span> 
				<span class="data_age">Age: <?= $character['age'] ?>歳</span>
				<div class="data_special">必殺技： <?= $character['special'] ?></div>
			</li>

			<?php
			}
			?>
		</ul>
		<div id="page_links" curpage="<?= $pager->getCurrentPageID() ?>" pagerange="<?= $page_range[0].','.$page_range[1] ?>" numpages="<?= $pager->numPages() ?>"><?= $links['all'] ?></div>
	</div>
</div>

<div id="page_navi"></div>

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// <![CDATA[
google.load('jquery', '1.5');
google.load('jqueryui', '1.8');
google.setOnLoadCallback(function () {
	jQuery('#page_navi').phpPagination('#page_links', {
		//オプションがあればここに
	});
});
// ]]>
</script>
<script type="text/javascript" src="js/jquery.php-pagination.v1.0.js"></script>
</body>
</html>

個々のページのデータは、ID属性がdata_listのリストに表示するようにしています。そして、通常のページナビを実装する要素をID属性がpage_linksのDIV要素とし、それとは別にビッグサイズのページナビ用にID属性がpage_naviのDIV要素を用意しておきます。ここで、PHPの変数データをjQueryで処理できるように渡すため、PHPサイドでページナビ要素の属性に埋め込むようにしています。ソースを見ていただくとページナビ要素にcurpage、pagerange、numpagesというカスタム属性が指定されているのが分かると思います。それでは続いてCSSファイルとJSファイルを見ていきたいと思います。

jquery.php-pagination.css（8/4修正）

 
@charset "UTF-8";

/* （注意）ウェブページのコンテンツ全体をラップする要素に適用します（デフォルトでは#wrapperとなっています） */
div#wrapper {
	color: #333;
	font-size: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", /*"メイリオ", Meiryo, */Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, arial, sans-serif;
}

/* ここからIE6対策用ハック */
* html, * html body {
	height: 100%;
	overflow-y: hidden;
	overflow-x: auto;
}

* html #wrapper {  
	overflow: auto;  
	position: relative;  
	width: 100%;  
	height: 100%;  
}
/* ここまでIE6対策用ハック */

#page_links {
	color: #333;
}
#page_links a:link {
	color: #0033CC;
}
#page_links a:visited {
	color: #9933CC;
}
#page_links a:hover {
	color: #0099CC;
}

#data_list {
	margin: 0px;
	padding: 15px 0px;
	text-align: left;
	list-style: none;
}

#data_list li {
	margin-bottom: 5px;
	padding: 5px 10px;
	height: 200px;
	line-height: 140%;
	background-color: #ADD8E6;
}

#page_links {
	margin-bottom: 80px;
}

#page_navi {
	padding: 15px;
	width: 100%;
	font-size: 120%;
	text-align: center;
	position: fixed !important;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#control span#cur_page {
	margin: 0px 20px;
	font-size: 120%;
	font-weight: bold;
}
#page_navi span#toggle {
	width: 16px;
	height: 16px;
	position: absolute;
	right: 5px;
	top: 5px;
}
#page_navi span#toggle span {
	left: 0px;
}

#control a#prev_page, #page_navi a#first_page {
	margin-right: 15px;
	font-size: 70%;
}
#control a#next_page, #page_navi a#last_page {
	margin-left: 15px;
	font-size: 70%;
}
#control a.pages {
	margin: 0px 5px;
	
}

IE6対策のため、コンテンツ部分をラップする要素を用意する必要があります。ここでは#wrapperとなっていますが、ID名は任意です。また、このファイルはリセットCSSと併用しているので、CSSがリセットされていない場合、若干レイアウトに違いが出るかもしれません。

jquery.php-pagination.js（8/6修正）
ソースコードのハイライターがうまく動作せず、空白やクオテーションマークがエンコードされてしまっている箇所があります。JSファイルのリンクがありますので、正確なコードはこちらを参照してください。

 
(function(jQuery) {
	var links, settings, url, curPage, pageRange, numPages;
	
	jQuery.fn.phpPagination = function(links, options) {
		links = jQuery(links);
		settings = jQuery.extend({}, jQuery.fn.phpPagination.defaultOptions, options);
		url = location.href.match(/.*\?/) !== null ? location.href.match(/.*\?/)[0] : location.href + '?';
		
		curPage = links.attr('curpage') - 0;
		pageRange = links.attr('pagerange').split(',');
		pageRange[0] = pageRange[0] - 0;
		pageRange[1] = pageRange[1] - 0;
		numPages = links.attr('numpages') - 0;
		
		return this.each(function(index) {
			var element = jQuery(this), control, i, html;
			control = jQuery('', { id: 'control' }).appendTo(element);
			element.addClass('ui-widget-header').css('opacity', 0.9).hide();
			
			html = '';
			if (curPage > 2) {
				html += '' + '先頭へ' + '';
			}
			if (curPage !== 1) {
				html += '' + '前へ' + '';
			}
			for (i = 1; i <= numPages; i++) {
				if (i === curPage) {
					html += '' + i + '';
				} else if (i >= pageRange[0] && i <= pageRange[1]) {
					html += '' + i + '';
				}
				if (settings.separator && i >= pageRange[0] && i < pageRange[1]) {
					html += ' ' + settings.separator + ' ';
				}
			}
			if (curPage !== numPages) {
				html += '' + '次へ' + '';
			}
			if (curPage < numPages - 1) {
				html += '' + '最後へ' + '';
			}
			
			control.html(html);
			control.children('a').button();
			element.append(jQuery('', { 'id': 'toggle' }));
			element.children('span#toggle').button({
				icons: {
					primary: 'ui-icon-arrowthickstop-1-s'
				}
			}).click(function () {
				control.toggle();
				if (control.get(0).style.display != 'none') {
					jQuery(this).button('option', 'icons', { primary: 'ui-icon-arrowthickstop-1-s' });
				} else {
					jQuery(this).button('option', 'icons', { primary: 'ui-icon-arrowthickstop-1-n' });
				}
			});
			
			if (settings.disabled) {
				element.children('span#toggle').button('option', 'icons', { primary: 'ui-icon-arrowthickstop-1-n' });
				control.hide();
			}
			
			element.fadeIn('fast');
		});
	};
	
	jQuery.fn.phpPagination.defaultOptions = {
		prefix: 'page',
		separator: '',
		disabled: false
	};
	
}(jQuery))

プラグインの呼び出し方は次のようにします。

 
jQuery('#page_navi').phpPagination('#page_links', {
		//オプションがあればここに
	});

オプションにはprefix、separator、disabledの指定が可能で、ハッシュ形式で設定します。prefixは、URLの?以下に付くページ番号の接頭語（たいていはpageになることが多い。PHP側の設定と合わせる必要がある）を指定します（デフォルトはpageです）。separatorはページナビのページ番号を区切るセパレーターを指定します。disabledのデフォルトはfalseで、ロード後にページナビをすぐ表示したくないときtrueを指定します。

- JavaScript/Ajax JavaScript, jQuery, jQuery UI, Pager, PEAR, PHP, ページネーション

Message

: ツイッター時代のAjaxアプリを模索中

大震災後の初めての更新です。災害に見舞われた方々に心からお見舞いを申し上げます。 …

: jQueryプラグイン作成法のまとめ

私はどちらかというとPrototype.jsライブラリをよく使ってきたのですが、 …

: show()/hide()メソッドの問題点

script.aculo.usのエフェクトを使うとき、知らないとつまずく要因にな …

: jQuery.Deferredでスクリプトの動的読み込みを試してみる

存在は知っていたけれど、いままで使ったことがなかった$.Deferredを今回試 …

: 知っておくと便利なscript.aculo.usエフェクトのあれこれ（その１）

この書籍Prototype & script.aculo.us Jav …

: Twitter Bootstrapを勉強中　ためしにツールチップを改造

レイアウトからメニューなどのパーツまで簡単に設置できるTwitter Boots …

: HTML5のCanvasでテキスト表示するライブラリ（その３）

Canvas Text Templateの新しいバージョンを作りました。文字間隔 …

: JSONでデータを扱う

JavaScriptを書くとき、サーバーとのデータ交換などをするのにJSON形式 …

: イベントハンドラ処理を重くしない書き方

イベントハンドラ（マウスクリックなどのイベントが発生すると呼ばれる関数）には、あ …

: ライブラリCanvas Text Templateを更新しました

約半年ぶりになりますが、HTML5のCanvasを使って文字出力するライブラリC …

PREV: jQueryとPHPで大きく見やすいページネーションを実装
NEXT: Yahoo!ショッピングのウィジェットで便利に商品検索