近期在学VFPBS时用到了LAYUI框架，在获取到数据后想在TABLE中分页显示出来，可是却发现所有数据都在同一页面直接显示了，于是就在百度上搜索了一番，终于解决了这个问题，现记录在此，以备后用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="layui.css" media="all"><!--layui.css可以从官网获取，目前与该页面处于同一目录，根据实际情况修改路径-->
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="layui.js"></script><!--layui.js可以从官网获取，目前与该页面处于同一目录，根据实际情况修改路径-->
<script>
layui.use('table', function(){
var table = layui.table; //调用表格组件 //创建第一个实例
table.render({
elem: '#demo'//绑定表格
,height: 312//自定义表格高度，可以去掉使用默认高度
,url: 'test.json' //数据接口，测试数据为https://www.layui.com/demo/table/user/?page=1&limit=30，复制保存到本地并命名为test.json
,page: true //开启分页
,cols: [[ //设置表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
//,limits: [3,5,10] //一页选择显示3,5或10条数据
,limit: 10 //一页显示10条数据
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
console.log(this);//
console.log(JSON.stringify(res));
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
});
</script>
</body>
</html>
最新回复