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 = mon;
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:{
done: function(res, curr, count){//如果是异步请求数据方式,res即为你接口返回的信息。//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度console.log(res);//得到当前页码console.log(curr); //得到数据总量console.log(count);}
}
}