前端layui框架分页

前端layui框架分页

layui 框架

layui官方地址
layui是一个前端框架,更好的封装了前端所需要的模块。简化 前端程序员的工作,丰富的样式变化,使界面更加美观,功能更加丰富。

分页功能

在这里记录一下遇见的问题,后端传输数据给前端,前端进行判断产生分页效果。

思路

ajax从后端一次性接收数据,然后截断数据分页渲染

演示

layui Page

<!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();
		}
	})

这篇文章有 2 个评论

  1. 第 Allen页

    test

  2. storno brzinol

    What’s Happening i’m new to this, I stumbled upon this I’ve found It absolutely useful and it has aided me out loads. I hope to contribute & aid other users like its helped me. Great job.

发表评论