此参考页面:/doc/modules/table.html
layui请求本地new.json文件
layui
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}
]]
});
});
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
}
]
}
也可以用这种格式
ID用户名性别城市签名积分职业财富评分