项目总结17-使用layui table分页表格总结
前言
在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择;本文介绍layui table分页表格的前后端简单使用
关键字
layui table 分页
正文
1-外部引用
使用layui table 需要引用layui.all.js 和 layui.css
我是直接将整个layui文件夹全部加入到项目中
2-前端代码
实例化表格
<table id="fansTable" lay-filter="test"></table><%--layui初始化需要的table--%> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#fansTable',//实例化需要的table的id height: 700,//容器高度 url: 'memberfans/list/'+${entity.id},//数据请求接口URL,GET方法,且服务端分页 page: true ,//开启分页 cols: [[ //表头 {type:'numbers', title: '序号', 80, sort: true, fixed: 'left',} ,{field: 'nameReal', title: '用户姓名', 200} ,{field: 'nameNick', title: '用户昵称',200} ,{field: 'mobile', title: '手机号', 200, sort: true} ,{field: 'avatarUrl', title: '头像', 200, templet: '#avatarTpl',sort: true}//templet参数用户定制列的数据特殊标签处理 ,{field: 'bindShopTimestr', title: '关联时间', 200, sort: true} ]] }); }); </script> <%--定制列样式,展示图片--%> <script type="text/html" id="avatarTpl"> <img style="100px;height:100px" src="{{d.avatarUrl}}"> </script>
设置列宽
<style> td .layui-table-cell { height: auto; line-height: 100px; } </style>
3-后台代码-数据请求接口
import com.hs.common.util.json.JsonUtil; @Controller @RequestMapping(value="/memberfans") public class MemberFansController extends BaseWebController<MemberFans> { @RequestMapping(value="/list/{shopId}",method = RequestMethod.GET) @ResponseBody public String listMemberFans(@PathVariable(value="shopId",required = true)Long shopId) throws ServerSqlErrorException { MemberFans req = new MemberFans(); req.setShopId(shopId); List<MemberFans> memberFans = memberFansService.listByCondition(req); //需要注意返回参数的格式,参数包括count、code、msg、data //并且需要以json字符串返回 Map<String,Object> rsMap = new HashMap<String,Object>(); rsMap.put("count", memberFans.size()); rsMap.put("code", 0); rsMap.put("msg", "detail"); rsMap.put("data", memberFans); return JsonUtil.toJson(rsMap); } }
4-展示效果
5-总结
1-当前示例使用的初始化渲染方式是方法渲染
2-分页方式是且服务端分页客户端分页
3-layui官网中有非常详细的文档说明,链接见参考资料-2