layui框架实战案例(9)：layPage 静态数据分页组件
颜志学
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
类似资料：