单按钮点击加载分页功能
时间: 2023-06-25 15:04:07 浏览: 43
实现单按钮点击加载分页功能,可以采用以下步骤:
1. 在页面中添加一个按钮,并绑定一个点击事件。
2. 在点击事件中,向后端发送请求,获取下一页数据。
3. 将获取到的数据插入到页面中已有的数据列表之后。
4. 如果已经加载完所有数据,则禁用按钮。
下面是一个示例代码:
HTML:
```html
<div id="data-list">
<!-- 已有的数据列表 -->
</div>
<button id="load-more">加载更多</button>
```
JavaScript:
```javascript
var page = 1; // 当前页码
var isEnd = false; // 是否已经加载完所有数据
$('#load-more').click(function() {
if (isEnd) {
return;
}
// 向后端发送请求,获取下一页数据
$.get('/api/data?page=' + (page + 1), function(data) {
if (data.length === 0) {
isEnd = true;
$('#load-more').prop('disabled', true);
return;
}
// 将获取到的数据插入到页面中已有的数据列表之后
data.forEach(function(item) {
$('#data-list').append('<div>' + item + '</div>');
});
page++;
});
});
```
这样,每次点击按钮时,就会向后端获取下一页数据,并将数据插入到页面中。如果已经加载完所有数据,则禁用按钮,不再发送请求。