从接口请求数据,赋值给layui table的data配置项,怎么实现分页
时间: 2024-02-20 08:56:02 浏览: 122
实现分页需要用到layui中的table模块。具体实现步骤如下:
1. 在HTML页面中添加一个table容器,如下所示:
```
<table id="demo" lay-filter="test"></table>
```
2. 在JS代码中引入layui模块,创建table实例,设置table参数,如下所示:
```
layui.use('table', function(){
var table = layui.table;
//执行一个 table 实例
table.render({
elem: '#demo',
url: '/demo/table/user/', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'username', title: '用户名', width:120},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
});
```
其中,url为数据接口,需要根据实际情况进行替换。
3. 在分页组件的 jump 回调函数中,重新渲染数据列表,如下所示:
```
layui.use('table', function(){
var table = layui.table;
//分页组件的 jump 回调函数
function jumpCallback(obj, first) {
//重新渲染数据列表
table.reload('demo', {
where: {
//接口的其它参数
page: obj.curr,
limit: obj.limit
},
page: {
curr: obj.curr //更新当前页码
}
});
}
});
```
其中,'demo'为table的lay-filter属性值,也就是table的ID,需要和HTML页面中的ID一致。
4. 在数据接口中,根据分页参数进行数据的筛选和返回,如下所示:
```
var data = [
{id:1, username:'张三', sex:'男', city:'北京', sign:'我是一个好人', experience: '116', score: '67', classify: '作家', wealth: '9999999'},
{id:2, username:'李四', sex:'女', city:'上海', sign:'我是一个坏人', experience: '12', score: '21', classify: '诗人', wealth: '666'},
...
];
app.get('/demo/table/user/', function(req, res){
var page = req.query.page || 1;
var limit = req.query.limit || 10;
var start = (page - 1) * limit;
var end = start + limit;
var result = {
"code": 0,
"msg": "",
"count": data.length,
"data": data.slice(start, end)
}
res.send(result);
});
```
其中,data为模拟的数据,可以根据实际情况进行替换。需要根据分页参数计算出需要返回的数据。
阅读全文