layPage 是一款多功能的 js 分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载。layPage 不依赖于任何第三方库，直接拿来用即可，它的接口继承了 layui 系列组件的一贯简洁，极易上手。
引入框架
<!--JS核心库--> <script src="layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
分页容器
<!--列表页--> <ul id="biuuu_city_list"></ul> <!--分页容器--> <div id="lockDom"></div>
核心代码
layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage , layer = layui.layer; //测试数据 var data = [ {name: '青岛粤青农业科技有限公司', lng: 119.9191302, lat: 36.1442458}, {name: '青岛鲁源农业专业合作社', lng: 119.8997403, lat: 36.13175327}, {name: '胶州市森科生态农业专业合作社', lng: 119.9999038, lat: 36.15471189}, {name: '胶州市杜老师安全拓展训练中心', lng: 119.9816036, lat: 36.08621275}, {name: '胶州市百果采摘园', lng: 119.9013517, lat: 36.07288212}, {name: '青岛万吉宝来农业发展有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛鑫洋福生态农业专业合作社', lng: 119.9461515, lat: 36.15735993}, {name: '青岛泽吉农业观光生态园开发有限公司', lng: 119.9230178, lat: 36.1519651}, {name: '青岛金美源农业专业合作社', lng: 119.9191465, lat: 36.11113417}, {name: '胶州市瑞香采摘园', lng: 119.9191302, lat: 36.1442458}, {name: '青岛鑫梦绿源种植专业合作社', lng: 119.8836507, lat: 36.12173263}, {name: '青岛宾贤种植专业合作社', lng: 119.995288, lat: 36.13478308}, {name: '青岛浏园农业观光生态园开发有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛村品农业专业合作社', lng: 119.9687582, lat: 36.16199038}, {name: '青岛锦翠园农业专业合作社', lng: 119.9287117, lat: 36.09161527}, {name: '青岛建福农作物种植专业合作社', lng: 120.0101525, lat: 36.12914181}, {name: '青岛卓越漫美绿色生态农业发展有限公司', lng: 119.9191302, lat: 36.1442458}, {name: '胶州市富海强邦绿色农业生态园专业合作社', lng: 119.9191302, lat: 36.1442458}, {name: '胶州市钗蕊生态农场', lng: 119.9643666, lat: 36.11625376}, {name: '胶州市志浩采摘园', lng: 119.9230178, lat: 36.1519651}, {name: '青岛国华水业有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛舒心生态休闲旅游专业合作社', lng: 119.9353816, lat: 36.1067673}, {name: '青岛晓晨农业生态科技有限公司', lng: 119.9362799, lat: 36.1067673}, {name: '青岛艾山天水生态休闲旅游专业合作社', lng: 119.9587755, lat: 36.11434526}, {name: '青岛东石万果休闲农业生态观光园专业合作社', lng: 119.9657141, lat: 36.11625376}, {name: '胶州市浩泉种植专业合作社', lng: 119.9405425, lat: 36.10088043}, {name: '青岛天正泽农业生态观光专业合作社', lng: 119.9657141, lat: 36.11625376}, {name: '青岛多福山生态农业专业合作社', lng: 119.9236381, lat: 36.11113417}, {name: '胶州市圆梦文化旅游接待服务中心', lng: 119.9191465, lat: 36.11113417}, {name: '青岛东石农业休闲旅游专业合作社', lng: 119.956731, lat: 36.11625376}, {name: '青岛南小坝生态园有限公司', lng: 119.9299795, lat: 36.13567496}, {name: '胶州市革田蔬菜家庭场', lng: 119.9117734, lat: 36.13668066}, {name: '青岛百兴生态农业科技有限公司', lng: 119.9717002, lat: 36.10545518}, {name: '青岛万果乡村旅游专业合作社', lng: 119.9717002, lat: 36.10545518}, {name: '青岛福伦瑞特农业有限公司', lng: 119.9717002, lat: 36.10545518}, {name: '青岛金澄海实业有限公司', lng: 119.9702398, lat: 36.13760013}, {name: '青岛洋河战家村农副产品专业合作社', lng: 119.9299795, lat: 36.13640367}, {name: '胶州市加林采摘园', lng: 119.9717002, lat: 36.10545518}, {name: '胶州市来福山庄生态农场', lng: 119.9195915, lat: 36.14190779}, {name: '胶州市学武生态农场', lng: 119.8994431, lat: 36.14245457}, {name: '胶州市后夼建英果树种植园', lng: 119.9219366, lat: 36.09467602}, {name: '青岛金葚莓家庭农场', lng: 119.9717002, lat: 36.10545518}, {name: '胶州市德瑞田园生态农场', lng: 119.9717002, lat: 36.10545518}, {name: '青岛东洋茶叶种植有限公司', lng: 119.947621, lat: 36.14240597}, {name: '青岛渡众苗木专业合作社', lng: 119.947621, lat: 36.14240597}, {name: '青岛艾山道文化旅游开发有限公司', lng: 119.9547145, lat: 36.13728665}, {name: '青岛宇石果蔬专业合作社', lng: 119.9692733, lat: 36.14661303}, {name: '胶州市十亩田生态农场', lng: 119.9547145, lat: 36.14093007}, {name: '胶州市甜甜豆豆采摘园', lng: 119.9711308, lat: 36.13477995}, {name: '胶州市山里佳园采摘园', lng: 119.9711308, lat: 36.13477995}, {name: '青岛汤漾河网络传媒有限公司', lng: 119.920025, lat: 36.14196178}, {name: '胶州市人从众旅游专业合作社', lng: 119.9195915, lat: 36.14190779}, {name: '青岛柜城餐饮酒店管理有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛绿洋农业科技有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '胶州市朝阳珍珠油杏采摘园', lng: 119.9765207, lat: 36.13477995}, {name: '胶州市同桥果树种植园', lng: 119.9117734, lat: 36.13668066}, {name: '胶州市孟昭虎家庭农场', lng: 119.9117734, lat: 36.13668066}, {name: '青岛艾山红奇异果生态专业合作社', lng: 119.9659706, lat: 36.08996225}, {name: '青岛艾山创客农业科技有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛旭日庄园生态观光旅游专业合作社', lng: 119.9195915, lat: 36.14190779}, {name: '青岛金禾天润农业科技有限公司', lng: 119.9195915, lat: 36.14190779}, {name: '青岛天池海宇农业科技有限公司', lng: 119.9587755, lat: 36.11580308}, {name: '胶州市润泽苗木花卉园', lng: 119.8999142, lat: 36.11131721}, {name: '胶州市龙腾四季采摘园', lng: 119.9659706, lat: 36.08996225}, {name: '胶州市军基蔬果采摘园', lng: 119.939748, lat: 36.13927787}, {name: '青岛九顶莲花山观光旅游有限公司', lng: 119.9794878, lat: 36.09522088}, {name: '青岛曲家芦农业种植专业合作社', lng: 119.9191302, lat: 36.1442458}, {name: '青岛森润农业种植专业合作社', lng: 119.9587755, lat: 36.11580308}, {name: '青岛炉山红富硒蔬果种植专业合作社', lng: 119.9191302, lat: 36.1442458}, {name: '青岛绿乐园农产品专业合作社', lng: 119.9191302, lat: 36.1442458}, {name: '青岛晓天农业生态园', lng: 119.9547145, lat: 36.14093007}, {name: '胶州市革田草莓采摘园', lng: 119.9117734, lat: 36.13668066}, {name: '胶州市艾东生态农业观光园', lng: 119.9717002, lat: 36.10545518}, {name: '胶州市村品生态休闲农场', lng: 119.9687582, lat: 36.16053342}, {name: '青岛洋河源东生态农业有限公司', lng: 119.9191302, lat: 36.1442458}, {name: '青岛鼓锣屿生态观光旅游有限公司', lng: 119.9547145, lat: 36.14093007}, {name: '青岛十亩田果蔬专业合作社', lng: 119.9547145, lat: 36.14093007}, {name: '青岛洋河艾小虎拓展训练有限公司', lng: 119.9657141, lat: 36.11625376} ]; //调用分页 laypage.render({ elem: 'lockDom' , count: data.length , limit: 10//每页显示条数 , limits: [10, 20, 30] , curr: 1//起始页 , groups: 3//连续页码个数 , prev: '上页'//上一页文本 , next: '下页'//下一页文本 , first: 1 //首页文本 //, last: 100 //尾页文本 //, layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'] , jump: function (obj) { document.getElementById('biuuu_city_list').innerHTML = function () { var arr = []; var thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit); //console.log(thisData); //遍历数据; layui.each(thisData, function (index, item) { arr.push('<li>' + item.name + ',' + item.lng + ',' + item.lat + '</li>'); }); return arr.join(''); }(); } }); });
@lockdata.cn
