LayUI的Table组件的使用

前台页面：

<body>
           
<table class="layui-hide" id="test"></table>
              
          
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'//对应着Table的ID
    ,url:'/xx/xx/xxx'//URL为数据接口的地址
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });
});
</script>

</body>

 

后端代码：

@WebServlet(name = "orderServlet",urlPatterns = "/orderServlet")
public class OrderServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)  {
        resp.setContentType("text/html;charset=UTF-8");
        //doSomething;
        resp.getWriter().print(jsonString);//jsonString为所需要返回的数据
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

LayUI接收的字符串格式不同于标准JSON格式，详情参考：https://www.layui.com/demo/table/user/?page=1&limit=30

posted @ 2020-06-06 19:04  漂白与湮灭  阅读(364)  评论(0)  编辑  收藏  举报