从接口请求数据,赋值给layui的data,怎么实现分页
时间: 2024-02-20 12:56:00 浏览: 57
实现分页需要用到layui中的分页组件。具体实现步骤如下:
1. 在HTML页面中添加一个分页容器,如下所示:
```
<div id="page"></div>
```
2. 在JS代码中引入layui模块,创建分页组件,设置分页参数,如下所示:
```
layui.use(['laypage'], function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'page', //注意,这里的 test1 是 ID,不用加 # 号
count: 50, //数据总数,从服务端得到
limit: 10, //每页显示的条数
curr: 1, //当前页码
jump: function(obj, first){
//首次不执行
if(!first){
//do something
}
}
});
});
```
3. 在数据请求的回调函数中,将数据赋值给layui的data,并更新分页组件的总页数,如下所示:
```
layui.use(['laypage'], function(){
var laypage = layui.laypage;
//数据请求的回调函数
function callback(res) {
//将数据赋值给layui的data
layui.data('data', {
key: 'list',
value: res.data.list
});
//更新分页组件的总页数
laypage.render({
elem: 'page',
count: res.data.totalCount,
limit: 10,
curr: 1,
jump: function(obj, first){
//do something
}
});
}
});
```
4. 在分页组件的 jump 回调函数中,重新渲染数据列表,如下所示:
```
layui.use(['laypage'], function(){
var laypage = layui.laypage;
//分页组件的 jump 回调函数
function jumpCallback(obj, first) {
//重新渲染数据列表
var list = layui.data('data').list;
var start = (obj.curr - 1) * obj.limit;
var end = start + obj.limit;
var html = '';
for (var i = start; i < end; i++) {
var item = list[i];
if (item) {
html += '<li>' + item.title + '</li>';
}
}
$('#list').html(html);
}
});
```
其中,#list 为数据列表的容器,可以根据实际情况进行替换。
阅读全文