我在开发的过程中用layui去实现前端页码的分页操作,但是在部署的过程中,发现我前端的数据是分页来读取数据的,所以这个layui的方法不能满足需求,我需要使用分页操作的js代码去读取数据,并且在这里记录一下开发中走的弯路。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../../nresource/comp/js/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo8"></div>
<div id="demo7"></div>
<script src="../../../../nresource/comp/private/module/cutover/js/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
//将一段数组分页展示
var data = ['1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6',];
console.log("typeofdata--------------"+typeof (data))
var pageNum=5;
console.log("typeofdata--------------"+typeof (data))
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//完整功能
laypage.render({
elem: 'demo7'
,count: data.length
,pages: Math.ceil(data.length/pageNum)//得到总页数
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj){
//模拟渲染
document.getElementById('demo8').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
console.log("thisData--------------"+thisData)
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>');
});
return arr.join('');
}();
}
});
});
</script>
</body>
</html>
版权声明:本文为qq_29423387原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。