软件简介

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/