layui 框架
layui官方地址
layui是一个前端框架，更好的封装了前端所需要的模块。简化 前端程序员的工作，丰富的样式变化，使界面更加美观，功能更加丰富。
分页功能
在这里记录一下遇见的问题，后端传输数据给前端，前端进行判断产生分页效果。
思路
ajax从后端一次性接收数据，然后截断数据分页渲染
演示
<!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="//res.layui.com/layui/dist/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="demo0"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>总页数大于页码总数</legend>
</fieldset>
<div id="demo1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义主题 - 颜色随意定义</legend>
</fieldset>
<div id="demo2"></div>
<div id="demo2-1"></div>
<div id="demo2-2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义首页、尾页、上一页、下一页文本</legend>
</fieldset>
<div id="demo3"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>不显示首页尾页</legend>
</fieldset>
<div id="demo4"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>开启HASH</legend>
</fieldset>
<div id="demo5"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>只显示上一页、下一页</legend>
</fieldset>
<div id="demo6"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo7"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义排版</legend>
</fieldset>
<div id="demo8"></div>
<div id="demo9"></div>
<div id="demo10"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义每页条数的选择项</legend>
</fieldset>
<div id="demo11"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>将一段已知数组分页展示</legend>
</fieldset>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//总页数低于页码总数
laypage.render({
elem: 'demo0'
,count: 50 //数据总数
});
//总页数大于页码总数
laypage.render({
elem: 'demo1'
,count: 70 //数据总数
,jump: function(obj){
console.log(obj)
}
});
//自定义样式
laypage.render({
elem: 'demo2'
,count: 100
,theme: '#1E9FFF'
});
laypage.render({
elem: 'demo2-1'
,count: 100
,theme: '#FF5722'
});
laypage.render({
elem: 'demo2-2'
,count: 100
,theme: '#FFB800'
});
//自定义首页、尾页、上一页、下一页文本
laypage.render({
elem: 'demo3'
,count: 100
,first: '首页'
,last: '尾页'
,prev: '<em>←</em>'
,next: '<em>→</em>'
});
//不显示首页尾页
laypage.render({
elem: 'demo4'
,count: 100
,first: false
,last: false
});
//开启HASH
laypage.render({
elem: 'demo5'
,count: 500
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值
});
//只显示上一页、下一页
laypage.render({
elem: 'demo6'
,count: 50
,layout: ['prev', 'next']
,jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +' 页');
}
}
});
//完整功能
laypage.render({
elem: 'demo7'
,count: 100
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj){
console.log(obj)
}
});
//自定义排版
laypage.render({
elem: 'demo8'
,count: 1000
,layout: ['limit', 'prev', 'page', 'next']
});
laypage.render({
elem: 'demo9'
,count: 1000
,layout: ['prev', 'next', 'page']
});
laypage.render({
elem: 'demo10'
,count: 1000
,layout: ['page', 'count']
});
//自定义每页条数的选择项
laypage.render({
elem: 'demo11'
,count: 1000
,limit: 100
,limits: [100, 300, 500]
});
//将一段数组分页展示
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
//调用分页
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>');
});
return arr.join('');
}();
}
});
});
</script>
</body>
</html>
demo
//前面要引用jQuery，layui.css，layui.js
<!-- 商品列表 start -->
<div class='all-product'>
</div>
<!-- 商品列表 end -->
<!-- 分页 start -->
<div id="demo20" class="mallPage"></div>
<!-- 分页 end -->
接收数据
// 使用Ajax接收数据
$.ajax({
type: 'get',
url: "xxxxx", //URL地址
data: {
token: token,
},
success: function (e) {
console.log("按钮展示", e);
if (e.status == 'ok') {
//使用layui
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage,
layer = layui.layer;
let data = e.data.product;
// console.log(data)
// console.log(products);
// 分页效果
var nums = 4; //每页出现的数据量
// 渲染
// // 调用分页
laypage.render({
// id
elem: 'demo20',
// 总长度
count: data.length,
// 一个页面几条数据
limit: nums,
jump: function (obj) {
str = '';
console.log('11111')
var arr = [];
arr.length = 0;
document.getElementsByClassName('all-product')[0].innerHTML =
function () {
// 将数据剪断
thisData = data.concat().splice(obj.curr * obj
.limit - obj.limit, obj.limit);
console.log(thisData)
layui.each(thisData, function (tmp, index) {
//字符串连接
str +=
"<div class='prodcts-item' data-detail-url=" +
thisData[tmp].detail_url + ">";
str += "<div class='itemImgs'>";
str += "<img src='" + thisData[tmp]
.pic_url + "' class='itemImg'>";
str += "</div>";
str += "<div class='itemText'>";
str += thisData[tmp].title;
str += "</div>";
str += " <div class='itemNumber'>";
str += "<span class='itemMoney'> ";
str += thisData[tmp].cost;
str += " </span>";
str += " <span class='itemSalary'> ";
str += thisData[tmp].payments;
str += "sold</span>";
str +=
"<div class='itemShipping'> +Shipping: US$3 .76 </div>";
str +=
"<button class='itemBtns hide' data-id='";
str += thisData[tmp].id;
str += "'> + Add To Importlist </button>";
str += " </div>";
str += "</div >";
console.log(str)
});
arr.push(str);
return arr.join('');
}();
}
});
});
}
},
error: function (e) {
alert_msg('网络错误')
},
complete: function (e) {
endLoading();
}
})
2600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
