prev/next | first/last按钮使用list.js分页的方法如下:
<ul>
元素来显示列表项。new List()
方法来初始化列表。将列表元素的ID作为参数传递给该方法。add()
方法将数据数组添加到列表中。这将自动在列表元素中生成对应的列表项。pagination()
方法启用分页功能。将每页显示的列表项数量作为参数传递给该方法。<div>
元素。pagination()
方法返回的对象来获取分页按钮的HTML代码。show()
方法来显示对应页码的列表项。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>List.js分页示例</title>
<script src="list.js"></script>
</head>
<body>
<ul id="myList"></ul>
<div id="pagination"></div>
<script>
// 数据数组
var data = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
// ...
];
// 初始化列表
var options = {
valueNames: ['name'],
item: '<li><span class="name"></span></li>'
};
var list = new List('myList', options);
// 添加数据
list.add(data);
// 启用分页
var perPage = 3; // 每页显示3个列表项
list.pagination({
paginationClass: 'pagination',
innerWindow: 1,
outerWindow: 1,
perPage: perPage,
container: document.getElementById("pagination"),
generatePages: function (currentPage, totalPages) {
var paginationHTML = '';
if (currentPage > 1) {
paginationHTML += '<a href="#" class="prev">prev</a>';
} else {
paginationHTML += '<span class="prev">prev</span>';
}
if (currentPage < totalPages) {
paginationHTML += '<a href="#" class="next">next</a>';
} else {
paginationHTML += '<span class="next">next</span>';
}
return paginationHTML;
}
});
// 处理分页按钮的点击事件
document.getElementById("pagination").addEventListener("click", function (event) {
event.preventDefault();
var target = event.target;
if (target.tagName.toLowerCase() === 'a') {
var page = parseInt(target.innerHTML);
list.show((page - 1) * perPage, perPage);
}
});
</script>
</body>
</html>
这样,你就可以使用list.js库来实现prev/next | first/last按钮的分页功能了。每次点击分页按钮时,列表将显示对应页码的列表项。
领取专属 10元无门槛券
手把手带您无忧上云