Layui表格自动渲染

layui table表格，使用lay-data，进行table表格自动渲染：

<table class="layui-table" lay-data="{

        height: 500,

        id:'test',

        url:'${ctx}/servlet/StaffServlet?type=tabStaff', //请求路径

        page: true,//是否显示分页工具条

        limit: 10,//每页默认显示的数量

        method: 'post', //提交方式      

        }" lay-filter="test">

        <thead>

            <tr>

                <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>

                <!-- <th lay-data="{field:'', width:80, sort: true">序号</th> -->

                <th lay-data="{field:'staffNum', sort: true}">编号</th>

                <th lay-data="{field:'staffMC', sort: true}">姓名</th>

                <th lay-data="{field:'staffTell', sort: true}">电话</th>

                <th lay-data="{field:'staffMod', sort: true}">手机</th>

                <th lay-data="{field:'departmentMC', sort: true}">部门</th>

                <th lay-data="{field:'positionMC', sort: true}">职位</th>

                <th lay-data="{field:'diZi', sort: true}">地址</th>

                <th lay-data="{field:'commentM', sort: true}">备注</th>

            </tr>

        </thead>               

</table>

table表格自动渲染重点是layui-table类的使用，所以一定要引用laui.css文件，还有使用lay-data配置基础参数。然后就是后台准备数据：

public void tabStaff(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        String page = request.getParameter("page");//当前是第几页数

        String limit = request.getParameter("limit");//每页显示数据条数

        List<StaffInfo> staffInfos = staffService.findAll(Integer.parseInt(page),

Integer.parseInt(limit));

        long totalRow = staffService.getTotalRow();

        LayuiJSON<StaffInfo> layuiJSON =new LayuiJSON<StaffInfo>();

        layuiJSON.setCount(totalRow);

        layuiJSON.setData(staffInfos);

        JSONObject jsonObject = JSONObject.fromObject(layuiJSON);

        PrintWriter out = response.getWriter();

        out.write(jsonObject.toString());

        out.flush();

        out.close();

    }

Layui请求数据会带有两个参数，分别是page和limit，page是当前是页数，limit是每页显示数据条数，而后台返回数据到页面需要四个参数：code,msg,count,data，这里封装了一个类LayuiJSON来返回页面

package com.web.vo;

import java.util.List;

public class LayuiJSON<T> {

        private int code = 0;

        private String msg;

        private long count;

        private List<T> data;

        //set/get方法

}

然后用JsonObect以Json数据格式返回到页面，最后页面后面记得引用layui.js加载table：

<script type="text/javascript">

        layui.use('table', function(){

            var table = layui.table;

        });     

</script>

整体运行效果如下：