layui数据表格使用方法

个人觉得layui数据表格除了渲染方法简单以外还有一大优点,就是自带分页功能,只要将page属性设置为true即可开启分页功能。这一优点给前后端人员都带来了极大的方便。

  table.render({

id:'id',
elem: '#collectsList',//表格挂载绑定的元素id
url: "collects/getCollects", //数据接口
where: {
"profileTypeId":$("#ajlx").val(),
"department_id":$("#slbm").val(),
"case_num":$("#ah").val(),
"pigeonhole_time":$("#nd").val(),
"litigant":$("#dsr").val()
},//需要向后台接口传递的参数
page: true, //开启分页
//even: true, //隔行背景
loading: true,//加载等待
cellMinWidth: 100, //全局定义常规单元格的最小宽度
cols: [[
      {fixed:'left', type:'checkbox'},
      {field:'id', width:80, title: 'ID'},
      {field:'profileTypeName',title: '案件类型'},
      {field:'departmentName',title: '受理部门'},
      {field:'caseNum',title: '案号'},
      {field:'summary', title: '案由'},
      {field:'pigeonholeTime', title: '归档年度'},
      {field:'litigant', minWidth: 300,  title: '当事人'},
      {field:'presidingJudge',title: '审判长'},
      {field:'courtCleck',title: '书记员'},
      {field:'acceptTime',title: '收案日期'},
      {field:'endTime',title: '结案日期'},
      {fixed:'right', field:'operation', width:100, title: '案件详情'},
      ]],
done: doneCallback,

});

注意,layui数据表格对后端接口返回的数据格式有很严格的要求,具体的数据格式可查看官方给出的例子,地址如下

http://www.layui.com/demo/table/user/?page=1&limit=30

一定要按照格式输出数据,不然前端会报请求接口异常的错

猜你喜欢

转载自blog.csdn.net/ygy211715/article/details/79990880