PHP+jQuery寥寥幾行代碼輕鬆實現百度搜索那樣的無刷新PJAX的分頁列表和導航連接

PHP寥寥幾行代碼輕鬆實現百度搜索那樣的分頁列表和導航連接,某些語言的擁躉哭暈在廁所.

<?php

$app = array(
	'db_prefix' => 'phpbest_',
	'db_sqlite' => '/dev/shm/phpbest/phpbest.db3',
);

//數據庫鏈接單例
function db() {
	global $app;
	static $db;
	if($db) {
		return $db;
	} else {
		try {
			$db = new PDO('sqlite:'.$app['db_sqlite']);
		} catch(PDOException $e) {
			echo $e->getMessage();
			exit();
		}
		return $db;
	}
}

//分頁導航連接
function page_nav($page, $page_size = 10, $before = 5, $after = 4) {
	$page = intval($page);
	$page_size = intval($page_size);
	global $app;
	$db = db();
	$table = $app['db_prefix'].'post';
	$arr = $db->query("SELECT count(id) FROM $table")->fetchAll(PDO::FETCH_NUM);
	$records = $arr[0][0]; //記錄數
	$pages = ceil($records/$page_size); //頁數
	if($pages == 0) return;
	if($page <= 0 || $page > $pages) return;
	
	$html = '<p>當前頁:前輸出5頁,後輸出4頁</p>';
	$html .= '<a href="?page=1">最前</a>';
	if($page != 1) { $html .= '<a href="?page='.($page - 1).'">上一頁</a>'; }
	if($page <= $before) { for($i = 1; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'頁</a>'; } }
	else { for($i = $page - $before; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'頁</a>'; } }
	$html .= '<a href="?page='.$page.'">第'.$page.'頁(當前頁)</a>';
	if($pages >= $page + $after) { for($i = $page + 1; $i <= $page + $after; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'頁</a>'; } }
	else { for($i = $page + 1; $i <= $pages; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'頁</a>'; } }
	if($page != $pages) { $html .= '<a href="?page='.($page + 1).'">下一頁</a>'; }
	$html .= '<a href="?page='.$pages.'">最後</a>';
	return $html;
}

//分頁列表內容
function page_list($page, $page_size = 10) {
	$page = intval($page);
	$page_size = intval($page_size);
	global $app;
	$db = db();
	$table = $app['db_prefix'].'post';
	$offset = ($page - 1) * $page_size;
	return $db->query("SELECT * FROM $table ORDER BY id DESC LIMIT $page_size OFFSET $offset")->fetchAll(PDO::FETCH_ASSOC);
}

?>

<div class="content pjax">
	<?php echo page_nav($_GET['page'], 2); ?>
	<ul>
	<?php
		foreach(page_list($_GET['page'], 2) as $v) {
			echo '<li>'.$v['id'].'</li>';
			echo '<li>'.$v['title'].'</li>';
			echo '<li>'.$v['content'].'</li>';
			echo '<li>'.date('Y-m-d H:i:s', strtotime($v['date'])).'</li><br>';
		}
	?>
	</ul>
</div>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script>
(function($){
	$(function(){
		//調用插件,用戶點擊連接後局部刷新class爲pjax(要求惟一)的塊並寫入歷史記錄
		$(document).pjax("a:not([target='_blank'])", ".pjax");
	});
})(jQuery);
</script>

jquery.pjax.js是我寫的一個插件,代碼簡單到差很少每一個人都看得懂:

/* jquery.pjax.js */
(function($){
	$.fn.pjax = function(selector, container) {
		
		//IE8之流不支持HTML5 onpopstate,天然不會執行插件
		if("onpopstate" in window) {
			
			//AJAX加載函數
			var load = function(href) {
				var time = 600;
				$(document).trigger("pjax:start", [time]); //執行開發者的自定義事件(如:顯示加載進度條)
				var start = new Date().getTime();
				$.ajax({
					type: "GET",
					url: href,
					data: {_pjax_: new Date().getTime()}
				}).done(function(data){
					//在回調函數中解析出head中的title和body中的指定塊並更新(這樣服務器端就不須要改變輸出格式)
					var dom = $("<div>").html(data);
					document.title = dom.find("title").first().text();
					$(container).first().html(dom.find(container).first().html());
					var spend = new Date().getTime() - start;
					setTimeout(function(){
						$(document).trigger("pjax:done"); //執行開發者的自定義事件(如:隱藏加載進度條)
					}, spend >= time ? 0 : time - spend);
				});
			};
			
			history.replaceState({href:location.href}, "", location.href);
			
			window.onpopstate = function() {
				//用戶點擊後退和前進按鈕時觸發該事件
				if(history.state != null) {
					load(history.state.href);
				}
			}
			
			$(container).on("click", selector, function(e){
				//用戶點擊頁面連接時改變地址欄(URL)並寫入歷史記錄以及AJAX加載頁面
				e.preventDefault();
				var href = $(this).attr("href");
				if(href != "javascript:void(0)") {
					history.pushState({href:href}, "", href);
					load(href);
				}
			});
		}
	};
})(jQuery);

不支持PJAX的瀏覽器如IE8會自動退化成原始的連接打開的方式,因此採用PJAX的站點也是能夠兼容IE8的.