PJAXPage基于 jQuery 的分頁(yè)工具

1. 什么是 PJAXPage ?

PJAX = pushState + ajax，Page 源自于 FastQuery 項(xiàng)目的 Page設(shè)計(jì).
PJAXPage 它基于 jQuery，用于實(shí)現(xiàn)前端翻頁(yè)，它的優(yōu)勢(shì)在于：

• 可以讓局部分頁(yè)請(qǐng)求變成有狀態(tài)

• 有多種分頁(yè)模型可供選擇

• 模塊化設(shè)計(jì)，開(kāi)發(fā)者可以擴(kuò)展分頁(yè)模型

2. 入門

2.1 HTML 代碼

<table class="table table-bordered table-hover">
	<!-- 表頭 -->
	<tr class="bg">
        <th>詞組</th> <th>拼音</th> <th>多選項(xiàng)</th>
        <th>正確答案</th> <th>詞義</th> </tr>
	<!-- 分頁(yè)數(shù)據(jù) -->
	<tbody id="dataListBox"> </tbody>
</table>

<!-- 分頁(yè)索引(分頁(yè)控制區(qū)) -->
<div id="pageCodeBox"></div>

2.2 JS 引用

依賴jQuery 1.7+

<!-- 核 -->
<script src="pjaxPage.js"></script>
<!-- 分頁(yè)模型 -->
<script src="pjaxPage.numberModel.js"></script>

3.3 JS 設(shè)置

如果采用本插件提供的分頁(yè)模型,服務(wù)端響應(yīng)的數(shù)據(jù)的格式必須為{pageData:{...},...}, 熟悉pageData數(shù)據(jù)結(jié)構(gòu).

$.pjaxPage({

	// ajax 配置.支持jQuery.ajax所有的配置選項(xiàng).ajax的settings,請(qǐng)參照jQuery官方說(shuō)明
	ajax : {
		url : "https://your.damain.com",
        // 支持"xml","html","script","json","jsonp","text"...等等
		dataType : "jsonp"
	},
	
	// 拼接分頁(yè)數(shù)據(jù),并返回
	createDataHtml : function(data) {
		var content = data.pageData.content;
		var total = content.length;
		if (total == 0)
			return "無(wú)數(shù)據(jù)";

		var dataHtml = '';
		for (var i = 0; i < total; i++) {
			
			var cizu = content[i].cizu;
			var pinyin = content[i].pinyin;
			var options = content[i].options;
			var ok = content[i].ok;
			var info = content[i].info;
			
			dataHtml += '<tr>';
			dataHtml += '	<td>' + cizu + '</td>';
			dataHtml += '	<td>' + pinyin + '</td>';
			dataHtml += '	<td>' + options + '</td>';
			dataHtml += '	<td>' + ok + '</td>';
			dataHtml += '	<td>' + info + '</td>';
			dataHtml += '</tr>';
		}

		return dataHtml;
	}
});

演示: http://xixifeng.com.oschina.io/pjaxpage/example/