layPage是一款前端JS分页组件，适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可。
1.layPage分页组件 使用教程方法+案例:
【使用方法：】：
<script>
/******************************************************/
/*************分页框架 实际使用讲解案例**************/
/******************************************************
【说明：】
1、 html头部引入JQuery.js 和 laypage.js 两个JS文件
2、 定义一个JS方法acrtionPage();
3、 定义好需要显示内容的DIV的ID 和页码显示DIV的ID
4、 在他们的下面直接调用JS方法：
acrtionPage('服务器请求地址','内容显示区父ID','分页页码显示区父ID');
*******************************************************
第一步：
<script src="./js/jquery.js"><\/script>
<script src="./js/laypage/laypage.js"><\/script>
*******************************************************
第二步：
<div id="page-data-content"></div>
<div class="pagination" id="page"></div>
*******************************************************
第三步：
<script>acrtionPage('服务器请求地址','内容显示区父ID','分页页码显示区父ID');<\/script>
*******************************************************
第四步：
定义JS方法
*******************************************************/
/**
* 获取分页数据
* author:xiaochuan
* @param url 服务器请求地址
* @param id1 内容显示区父ID
* @param id2 分页页码显示区父ID
* @param curr 当前页码
*/
function acrtionPage(url,id1,id2,curr){
$.post(url, {
key1:'参数1',key2:'参数2',key3:'参数3',page: curr || 1 //可以传递自己需要的参数
}, function(res){
var obj=eval("("+res+")");//转换为json对象
var data = obj.data;
var str = '';
for (var i = 0; i < data.length; i++) {
//html组装数据 生成字符串
};
if(str == ''){
str = '<div style="text-align:center;">暂无数据</div>';
$('#'+id2).hide();
}
$('#'+id1).html(str);
laypage({
cont: id2,
pages: obj.total, //总页数
skin: '#AF0000',
curr: curr || 1,
//点击分页后的触发回调方法
jump: function(obj, first){
if(!first){
//点击跳页触发函数自身，并传递当前页：obj.curr
articlePage(url,id1,id2,obj.curr);
}
}
});
});
}
</script>转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/61.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
