layui数据表格获取数据

前端html页面

思路步骤：1.请求后端的总条数

                  2.后端数据的格式顺序要与表头数据相同

                  3.table组件接受数据的格式为

               

table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data.item //解析数据列表 }; } //,…… //其他参数 });

                 4.请求数据

 

前端script代码

layui.use(['table',"jquery","layer"], function(){  //加载模块   var table = layui.table;   var $=layui.$;   var layer=layui.layer;   var count=10;   //总条数             $.ajax({                 url:"../../../SchoolServlet?method=getAllSchoolCount"  //向后端发送请求获取总条数                ,type:"POST"                ,dataType:"json"                ,success:function(data){                    console.log("data: "+data);                    count=parseInt(data);  //获取后端的总条数                                       table.render({                         elem: '#demo'                         ,height: 512                         ,url: '../../../SchoolServlet?method=getAllSchool' //数据接口，获取查询的所有数据，json格式                         ,page: true //开启分页                         ,cols: [[ //表头                             {type:'radio'}                            ,{field: 'school_id', title: 'id', width:80, sort: true, fixed: 'left'}                           ,{field: 'school_name', title: '学校名', width:"20%"}                           ,{field: 'school_phone', title: '学校联系电话', width:"20%"}                           ,{field: 'school_address', title: '学校地址', width:"20%"}                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: "20%"}                                                    ]]                       , parseData:function (res) {  //返回数据值（必填）                           return{                               "code":0,                               "msg" :'',                               "count": count,                                "data" :res                           }                       }                        , page:{                           count:count                            }                        });                }//end succes             });//end ajax           });

后台Servlet页面

//获取学校数据的总条数 public void getAllSchoolCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SchoolService service=new SchoolServiceImpl(); int count=service.getAllSchoolNum(); //System.out.println("schoolNum"+count); //将获取的总条数返回给前端 response.getWriter().print(count); } //返回请求的数据 public void getAllSchool(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); // url:"xxxServlet?page=xx&limit=xx" //layui请求数据接口的时候默认会携带page参数和limit int page=Integer.parseInt(request.getParameter("page")); int limit=Integer.parseInt(request.getParameter("limit")); SchoolService schoolService=new SchoolServiceImpl(); //查询分页数据mysql的物理分页 List<School> list=schoolService.selectAll(page,limit); //System.out.println(list); String data=JSON.toJSONString(list); //将数据返回给前端的ajax response.getWriter()print(data); }

更多的东西需要的看官方文档