此参考页面:http://www.layui.com/doc/modules/table.html
layui请求本地new.json文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> </head> <body> <table class="layui-hide" id="test"></table> <script src="layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'new.json' ,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> </html>
new.json文件格式
{ "code":0, //数据状态的字段名称,默认:code "msg":"", //状态信息的字段名称,默认:msg "count":1000, //数据总数的字段名称,默认:count "data":[ //数据列表的字段名称,默认:data { "id":1, "username":"user-0", "sex":"女", "city":"城市-0", "sign":"签名-0", "experience":255, "logins":24, "wealth":82830700, "classify":"作家", "score":57 }, { "id":2, "username":"user-0", "sex":"女", "city":"城市-0", "sign":"签名-0", "experience":255, "logins":24, "wealth":82830700, "classify":"作家", "score":57 } ] }
由于很多时候后台发来的数据参数可能和layui默认的参数不一样,我们也可以自定义数据参数
对分页请求的参数:page、limit重新设定名称,如:
request:{ pageName: 'curr' //页码的参数名称,默认:page ,limitName: 'nums' //每页数据量的参数名,默认:limit }
用于对返回的数据格式的自定义,如:
完整的自定义参数js代码:
layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'new2.json' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,page:true //显示分页默认不显示 ,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} ]] //用于对分页请求的参数:page、limit重新设定名称,如: ,request:{ pageName: 'curr' //页码的参数名称,默认:page ,limitName: 'nums' //每页数据量的参数名,默认:limit } //用于对返回的数据格式的自定义,如: ,response: { statusName: 'status' //数据状态的字段名称,默认:code ,statusCode: 0 //成功的状态码,默认:0 ,msgName: 'hint' //状态信息的字段名称,默认:msg ,countName: 'total' //数据总数的字段名称,默认:count ,dataName: 'rows' //数据列表的字段名称,默认:data } }); });
json文件参数名(及返回数据参数名)
{ "status":0, "hint":"", "total":1000, "rows":[ { "id":1, "username":"user-0", "sex":"女", "city":"城市-0", "sign":"签名-0", "experience":255, "logins":24, "wealth":82830700, "classify":"作家", "score":57 }, { "id":2, "username":"user-0", "sex":"女", "city":"城市-0", "sign":"签名-0", "experience":255, "logins":24, "wealth":82830700, "classify":"作家", "score":57 } ] }
也可以用这种格式
<table class="layui-table" lay-data="{width: 892, height:332, url:'new2.json', page:true, id:'idTest',request:{pageName: 'curr',limitName: 'nums'},response:{statusName: 'status',statusCode: 0,msgName: 'hint',countName: 'total',dataName: 'rows'} }" lay-filter="demo"> <thead> <tr> <th lay-data="{type:'checkbox', fixed: 'left'}"></th> <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th> <th lay-data="{field:'username', width:80}">用户名</th> <th lay-data="{field:'sex', width:80, sort: true}">性别</th> <th lay-data="{field:'city', width:80}">城市</th> <th lay-data="{field:'sign', width:160}">签名</th> <th lay-data="{field:'experience', width:80, sort: true}">积分</th> <th lay-data="{field:'classify', width:80}">职业</th> <th lay-data="{field:'wealth', width:135, sort: true}">财富</th> <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th> </tr> </thead> </table>