PJAXPage 2.1 HTML 代码2.2 JS 引用3.3 JS 设置 介绍
1. 什么是 PJAXPage ?
PJAX = pushState + ajax， Page 源自于
FastQuery 项目的 Page设计.
PJAXPage 它基于 jQuery ，用于实现前端翻页，它的优势在于：
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>
<!-- 分页数据 -->
<tbody id="dataListBox"> </tbody>
</table>
<!-- 分页索引(分页控制区) -->
<div id="pageCodeBox"></div>
2.2 JS 引用
依赖jQuery 1.7+
<!-- 核 --> <script src="pjaxPage.js"></script> <!-- 分页模型 --> <script src="pjaxPage.numberModel.js"></script>
3.3 JS 设置
如果采用本插件提供的分页模型,服务端响应的数据的格式必须为{pageData:{...},...},
熟悉pageData数据结构.
$.pjaxPage({
// ajax 配置.支持jQuery.ajax所有的配置选项.ajax的settings,请参照jQuery官方说明
ajax : {
url : "https://your.damain.com",
// 支持"xml","html","script","json","jsonp","text"...等等
dataType : "jsonp"
},
// 拼接分页数据,并返回
createDataHtml : function(data) {
var content = data.pageData.content;
var total = content.length;
if (total == 0)
return "无数据";
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/
PJAXPage 2.1 HTML 代码2.2 JS 引用3.3 JS 设置 官网
https://gitee.com/xixifeng.com/pjaxpage
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
