此參考頁面：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>