>效果
>代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layPage_demo[JS_分页组件]</title>
<meta name="keywords" content="分页插件,ajax分页,异步分页">
<meta name="description" content="laypage是一款多功能的js分页组件,主要应用于前端页面Ajax普通分页以及信息流加载,并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库,直接拿来用即可,它的接口继承了layui系列组件的一贯简洁,极易上手。那么,从现在开始,将分页的任务交给laypage吧!">
</head>
<body>
<!-- 数据显示 容器 -->
<ul id="ul_city_list"></ul>
<!-- 分页组件 容器 -->
<div id="div_city"></div>
<div style="width:800px; margin:100px 0 0; font-size:14px;">
<p>使用方法:把laypage整个目录放入你的项目,只需引入laypage.js即可,其它一律无视。</p>
<p>详细文档打开demo,或者直接进入官网:<a href="http://laypage.layui.com">http://laypage.layui.com</a></p>
</div>
<script src="laypage/laypage.js"></script>
<script>
//测试数据[数组_37];
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
var nums = 5; //每页数量;
var pages = Math.ceil(data.length/nums); //总页数量[8];
var thisDate = function(curr){ //curr当前页;thisDate当页数据;
//此处只是演示,实际场景通常是返回当前页已经分组好的数据;
var str = '', last = curr * nums - 1;
last = last >= data.length ? (data.length-1) : last; //最后下标;
for(var i = (curr * nums - nums); i <= last; i++){
str += '<li>'+ data[i] +'</li>';
}
return str;
};
//调用分页
laypage({
cont: 'div_city', //分页组件容器;
pages: pages,
jump: function(obj){
document.getElementById('ul_city_list').innerHTML = thisDate(obj.curr);
}
});
</script>
</body>
</html>