layui 数据表格使用

    //第一个实例
table.render({
    elem: '#demo'
    ,height: 400
    ,url: '/My_NewsTest/LookServlet' //数据接口
    ,page: true //开启分页
  ,limit:5
  ,limits:[3,6,10]
  ,page:true
  ,parseData: function(res){ //res 即为原始返回的数据
        return {
            "code":0, //解析接口状态
            "msg":"", //解析提示文本
            "count":res.lmit, //解析数据长度
            "data":res.arr //解析数据列表
          };
        }
    ,cols: [[ //表头
      {field: 'id', title: 'ID', sort:true,width:80,fixed: 'left',align:'center',}
      ,{field: 'info', title: 'info', width:80,align:'center'}
      ,{field: '', title: '操作', width:400,height:100,align:'center',toolbar:"#demo1"}
    ]]
  });
  

});

引入 layui.css  layui.js

使用的是模块化加载,效果图如下

猜你喜欢

转载自www.cnblogs.com/xiaozhang666/p/11235657.html