layui分页的奇淫技巧

  这段我时间我查阅一些资料，了解到layui虽然是一款采用自身模块规范编写的前端 UI 框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。但实际上它大多数用于后端，那怎么使用layui进行渲染动态的数据表格呢？
先来看一下效果：

具体操作：

• 先引入layui的js和css文件，这个文件需要官网下载layui

<link rel="stylesheet" href="../public/layui-v2.5.6/css/layui.css">
<script src="../public/layui-v2.5.6/layui.js"></script>

• 在页面中写入一个table元素，并给他添加id属性

    <table class="layui-hide" id="test"></table>

• 通过table.render()进行渲染页面
  具体看一下代码：

layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'//分页容器的ID
            ,url:'/getData' //获取数据的接口
            ,toolbar:true //添加表头工具栏
            ,title:'用户数据表'
            ,width:1000
            ,height:450
            ,cols: [[
                {field: '_id',style:'position: absolute;opacity: 0;'}
                ,{field:'username', width:105, title: '用户名',sort:true}
                ,{field:'pic',title: '图片',width: 90,templet:(d)=>{return "<div><img src=\""+ d.pic + "\" ></div>";}}
                ,{field:'sex', width:80, title: '性别'}
                ,{field: 'email',title:'邮箱',width:160}
                ,{field: 'lottery',title:'个性签名',width:225}
                ,{field:'joinTime', title: '加入时间',width: 110,sort:true}
                ,{field:'pay', width:80, title: '消费',sort:true}
                ,{field: 'candle',width: 130,align:"left",toolbar: '#barDemo'}
            ]]
            ,page: {
                layout:['prev','page','next','count','limit','skip']
                ,groups:10 //最多显示几个跳页按钮
                ,first:false //不显示首页
                ,last:false  //不显示尾页
            }
            ,loading:true //分页加上动画效果
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });
    });

其中，

• elem:表示要渲染的容器，即刚刚添加的那个table元素的id名

elem: ‘#test’

• url:设置获取数据的接口

url:’/getData’ 获取数据的接口

• toolbar:表示是否添加表格上方的工具栏

toolbar:true 添加表头工具栏

• 接下来的title、width、height和html中的一样，用来设置这个表格的标题、宽度和高度
• 重点来了cols这个主要设置表格要显示的各个字段名，以及各个字段的宽度，其中field要对应自己数据库的字段名，不然无法显示

{field: ‘_id’,style:‘position: absolute;opacity: 0;’}

• 接下来是主要的分页，layout是自己设置的模板，主要用于在表格下方显示什么内容

layout:[‘prev’,‘page’,‘next’,‘count’,‘limit’,‘skip’]

groups:用于设置最多显示几个跳页按钮
first:false 当在第一页是不能点击首页
last:false 当在最后一页不能点击尾页
loading:true 用于添加分页动画

• parseData将原始数据解析成 table 组件所规定的数据

 parseData: function(res){ 
     return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.count, //解析数据长度
          "data": res.data //解析数据列表
      };
  }

  以上就是我对使用layui数据表格后的总结，目前我还个是前端小白，可能有的地方写的不正确，希望大家可以指正。