建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery前端翻页插件PJAXPage

来源:易助科技网浏览量:12收藏

简介

PJAXPage是一款前端翻页插件。PJAX = pushState + ajax,Page 源自于 FastQuery 项目的 Page 设计

PJAXPage 它基于 jQuery,用于实现前端翻页,它的优势在于:

可以让局部分页请求变成有状态

有多种分页模型可供选择

模块化设计,开发者可以扩展分页模型

(下载的附件中附有DEMO)


使用

1.  引入文件


<!-- 核 -->
<script src="pjaxPage.js"></script>

<!-- 分页模型 -->
<script src="pjaxPage.numberModel.js"></script>


2.  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>


3.  调用


$.pjaxPage({
	// ajax 配置.支持jQuery.ajax所有的配置选项.ajax的settings,请参照jQuery官方说明
	ajax : {
		url : "https://your.damain.com",
		dataType : "jsonp" // 支持"xml","html","script","json","jsonp","text"...等等
	},
	// 自定义分页数据结构对象的名称为"pageData",其实默认也是这个值,可以省略不配置.
	pageDataKeyName : "pageData",
	// 拼接分页数据,并返回
	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;
	}
});



相关链接

GitHub 地址 :https://github.com/devopsmi/pjaxpage