PJAXPage 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
PJAXPage 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
PJAXPage 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 fastquery
适用人群 未知
收录时间 2017-09-14

软件简介

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/

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
发表了资讯
2017/09/21 09:46

PJAXPage 1.1 发布,支持 PJAX 的分页插件

PJAXPage 1.1 发布了,新增分页模型: pjaxPage.textModel.js pjaxPage.toggleModel.js pjaxPage.simpleModel.js 其他改进: 支持配置P.Struct(分页数据结构)的对象名称. 新增 example. 例子: http://xixifeng.com.oschina.io/pjaxpage/example/ 手册: https://gitee.com/xixifeng.com/pjaxpage...

1
15
发表了资讯
2017/09/15 09:40

PJAXPage 1.0 发布,基于 PJAX 的分页插件

PJAXPage 首个版本发布了。 更新日志如下: 完成 pjaxPage.js 1.0 核心设计 新增两个分页模型 pjaxPage.numberModel.js, pjaxPage.singleModel.js 什么是 PJAXPage ? PJAX = pushState + ajax,Page 源自于 FastQuery 项目的 Page设计。PJAXPage 基于 jQuery,用于实现前端翻页,它的优势在于: 可以让局部分页请求变成有状态 有多种分页模型可供选择 模块化设计,开发者可以扩展分页模型 演示: http://xixifeng.com.oschina.i...

1
26
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
21 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部