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

这篇文章有 3 个评论

  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.

  3. Earn Online

    Wow, awesome blog structure! How lengthy have you been blogging for? you made blogging glance easy. The total look of your site is excellent, as well as the content material!!

发表评论