Web_JavaScript_JS随记：分页组件；

来源：互联网发布：电影产业知乎编辑：程序博客网时间：2024/06/15 19:34
>效果
>代码
<!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>
0 0