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

: そして再びRPG制作へ……

突然ですが約1年半ぶりにRPG制作を開始します。前回はというとシステム作りの段階 …

: ClickableCanvasのその後２

IEで不具合のケースが目立つClickableCanvasでしたがFlashCa …

: Ajaxでパスワード認証の続き-公開スクリプト

この記事は過去のセキュリティ的に低い観点で書かれたものです。こちらが万全というわ …

: Webサイトでフリーフォントを使う　―Webフォントとtypeface.jsを比較して

ウェブサイトで使われるフォントについてちょっと考えてみました。ウェブページで使 …

: 軽量JavaScriptライブラリ「jPrim」ジェイプリム

現在ツイッター関係と同時進行でJavaScriptライブラリを作っています。いつ …

: 独自のエラーメッセージを表示するスクリプト

久しぶりの更新になります。あれをやったりこれをやったり、はたまた時間がなくて長期 …

: GoogleMap Auto Zoomer.jsの更新しました

グーグルマップの矩形エリアにマウスを入れると地図が自動で拡大するスクリプト、Go …

: チャレンジ-レスポンス認証にチャレンジ！

Ajaxでパスワード認証をウェブの会員サイトでよくあるパスワード認証にBasi …

: IE6で透過PNGを表示させる　IE PNG Fix

話題としては今さら感がありますが、Internet Explorerのバージョン …

: PHPとJavaScriptでAjaxストリーミングを実装中

今回はAjaxストリーミングの実装を具体的に見ていこうと思います。ストリーミング …

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