项目总结17-使用layui table分页表格

项目总结17-使用layui table分页表格总结

前言

　　在项目中，需要用到分页的表格来展示数据，发现layui的分页表格，是一个很好的选择；本文介绍layui table分页表格的前后端简单使用

关键字

　　layui   table   分页

正文

1-外部引用

　　使用layui table 需要引用layui.all.js 和  layui.css

　　下载地址：https://www.layui.com/

　　我是直接将整个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: '序号', width:80, sort: true, fixed: 'left',}
                    ,{field: 'nameReal', title: '用户姓名', width:200}
                    ,{field: 'nameNick', title: '用户昵称',width:200}
                    ,{field: 'mobile', title: '手机号', width:200, sort: true}
                    ,{field: 'avatarUrl', title: '头像', width:200, templet: '#avatarTpl',sort: true}//templet参数用户定制列的数据特殊标签处理
                    ,{field: 'bindShopTimestr', title: '关联时间', width:200, sort: true}
                ]]
            });
        });
    </script>
    <%--定制列样式，展示图片--%>
    <script type="text/html" id="avatarTpl">
        <img style="width: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

参考资料

1-https://www.layui.com/

2-https://www.layui.com/demo/table.html