PJAXPage基于 jQuery 的分頁工具
1. 什么是 PJAXPage ?
PJAX = pushState + ajax,Page 源自于 FastQuery 項目的 Page設(shè)計.PJAXPage 它基于 jQuery,用于實現(xiàn)前端翻頁,它的優(yōu)勢在于:
可以讓局部分頁請求變成有狀態(tài)
有多種分頁模型可供選擇
模塊化設(shè)計,開發(fā)者可以擴(kuò)展分頁模型
2. 入門
2.1 HTML 代碼
<table class="table table-bordered table-hover"> <!-- 表頭 --> <tr class="bg"> <th>詞組</th> <th>拼音</th> <th>多選項</th> <th>正確答案</th> <th>詞義</th> </tr> <!-- 分頁數(shù)據(jù) --> <tbody id="dataListBox"> </tbody> </table> <!-- 分頁索引(分頁控制區(qū)) --> <div id="pageCodeBox"></div>
2.2 JS 引用
依賴jQuery 1.7+
<!-- 核 --> <script src="pjaxPage.js"></script> <!-- 分頁模型 --> <script src="pjaxPage.numberModel.js"></script>
3.3 JS 設(shè)置
如果采用本插件提供的分頁模型,服務(wù)端響應(yīng)的數(shù)據(jù)的格式必須為{pageData:{...},...}, 熟悉pageData數(shù)據(jù)結(jié)構(gòu).
$.pjaxPage({
// ajax 配置.支持jQuery.ajax所有的配置選項.ajax的settings,請參照jQuery官方說明
ajax : {
url : "https://your.damain.com",
// 支持"xml","html","script","json","jsonp","text"...等等
dataType : "jsonp"
},
// 拼接分頁數(shù)據(jù),并返回
createDataHtml : function(data) {
var content = data.pageData.content;
var total = content.length;
if (total == 0)
return "無數(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;
}
});
評論
圖片
表情
