使用layui 渲染table数据表格的实例代码

<  rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" >

<  src="lib/layui/layui.js"></ >

<table class="layui-hide" id="test" lay-filter='test3'></table>

layui.use('table', function(){
      var table = layui.table;
//      var p Name;
//      if(item != undefined) {
//        p Name=item;
//      }
      table.render({
        elem: '#test' table 容器的选择器或 DOM
        ,url:'http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourP ByTourIdAndRounds'
        ,method:'post'
        ,where:{tourId:tourIds,rounds:rounds,p Name:item}
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
          {field:'tourP Id', width:80,  : 'ID1', sort: true}
          ,{field:'p Name', width:80,  : '姓名'}
          ,{field:'hole1',  : '1',edit: 'text'}
          ,{field:'hole2',  : '2',edit: 'text'}
          ,{field:'hole3',  : '3',edit: 'text'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'hole4',  : '4',edit: 'text'}
          ,{field:'hole5',  : '5',edit: 'text'}
          ,{field:'hole6',  : '6',edit: 'text'}
          ,{field:'hole7',  : '7',edit: 'text'}
          ,{field:'hole8',  : '8',edit: 'text'}
          ,{field:'hole9',  : '9',edit: 'text'}
          ,{field:'hole10',  : '10',edit: 'text'}
          ,{field:'hole11',  : '11',edit: 'text'}
          ,{field:'hole12',  : '12',edit: 'text'}
          ,{field:'hole13',  : '13',edit: 'text'}
          ,{field:'hole14',  : '14',edit: 'text'}
          ,{field:'hole15',  : '15',edit: 'text'}
          ,{field:'hole16',  : '16',edit: 'text'}
          ,{field:'hole17',  : '17',edit: 'text'}
          ,{field:'hole18',  : '18',edit: 'text'}
          ,{field:'add',  : '操作', width:177,toolbar:"#barDemo"}
        ]],
      });
      });

response: {
  statusName: 'code' //数据状态的字段名称，默认：code
  ,statusCode: 200 //成功的状态码，默认：0
  ,msgName: 'msg' //状态信息的字段名称，默认：msg
  ,countName: 'count' //数据总数的字段名称，默认：count
  ,dataName: 'data' //数据列表的字段名称，默认：data
}