layui table样式_layui table 分页

大家好，又见面了，我是你们的朋友全栈君。

table的结构：

<table lay-filter=”userlist-table” style=”display: none;”> 

  <thead>     <tr>       <th lay-data=”{field:’a’, width:200}”>序号</th>       <th lay-data=”{field:’b’, width:150}”>登录账号</th>       <th lay-data=”{field:’c’, minWidth: 180}”>用户名</th>       <th lay-data=”{field:’d’, minWidth: 180}”>权限</th>       <th lay-data=”{field:’e’, minWidth: 180}”>操作</th>     </tr>    </thead>   <tbody>     <#if baseUserPageModel?? && baseUserPageModel.data??> <#list baseUserPageModel.data as user> <tr> <td>${(user.id)!”}</td> <td>${(user.userAccount!”)}</td> <td>${(user.userName!”)}</td> <td>${(user.roleName!”)}</td> <td>  <a class=”layui-btn layui-btn-xs” class=”edit” οnclick=’editUser(${user.id})’ >编辑</a>  <a class=”layui-btn layui-btn-danger layui-btn-xs” class=”del” οnclick=’deleteUser(${user.id})’ >删除</a> </td> </tr> </#list> </#if>   </tbody>

</table>

使用layui渲染table

layui.use([‘common’,’table’,’jquery’], function(){   var common = layui.common;   var table = layui.table;   var $=layui.$;    var data={    table :{ id:’userlist-table’, options:{   } }, page :{  id:”page”, fromId:”searchFrom”, options:{  layout: [‘count’, ‘prev’, ‘page’, ‘next’, ‘limit’, ‘skip’], first: ‘首页’, last: ‘尾页’ } }    };    common.filltable(data); });

common是自己封装的form table page一体的js插件。

如果想修改某个表格的单元格高度或者修改一些样式，可以在回调函数done里设置。

table :{ id:’userlist-table’, options:{

1. done: function(res, curr, count){
2. //如果是异步请求数据方式，res即为你接口返回的信息。
3. //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
4. console.log(res);
6. //得到当前页码
7. console.log(curr);
9. //得到数据总量
10. console.log(count);
11. }

} }

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/192849.html原文链接：https://javaforall.cn