部分分页是指在一个长列表或数据集中,每次只显示部分数据,然后通过点击分页器或滚动加载来加载下一页数据。以下是一个使用JavaScript实现部分分页的代码示例:
HTML部分:
JavaScript部分:
var data = []; // 假设这是从服务器获取的数据数组
var perPage = 10; // 每页显示的数据数量
var currentPage = 1; // 当前页码
function loadData() {
var startIndex = (currentPage - 1) * perPage;
var endIndex = startIndex + perPage;
var html = '';
for (var i = startIndex; i < endIndex; i++) {
if (data[i]) {
html += '' + data[i] + '';
}
}
document.getElementById('data-container').innerHTML += html;
}
function loadMore() {
currentPage++;
loadData();
}
document.getElementById('load-more').addEventListener('click', loadMore);
loadData(); // 初始化加载第一页的数据
在这个示例中,我们首先定义了一个数组data
,里面存储了我们要展示的数据。然后,我们定义了每页显示的数据数量perPage
和当前页码currentPage
。
loadData
函数根据当前页码计算出要显示的数据范围,并将这些数据渲染到data-container
元素中。loadMore
函数用于加载下一页数据,它将当前页码加1,然后调用loadData
函数来加载新的数据。我们给“加载更多”按钮添加了一个点击事件监听器,当点击按钮时会执行loadMore
函数。
最后,我们在页面加载时调用loadData
函数来初始化加载第一页的数据。
这样,当用户点击“加载更多”按钮时,会加载下一页的数据并追加到页面上,实现了部分分页效果。