You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
1.8 KiB

const tableRows = document.querySelectorAll('.table-row');
// 设置每页显示的条数
const itemsPerPage = 10;
// 获取上一页和下一页按钮元素
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
let currentPage = 1; // 当前页数,默认为第一页
// 显示当前页码的函数
function displayCurrentPage() {
const currentPageEl = document.getElementById('current-page');
currentPageEl.innerHTML = currentPage;
}
// 隐藏所有行元素
function hideRows() {
tableRows.forEach(row => {
row.style.display = 'none';
});
}
// 根据当前页码显示对应的行元素
function displayRows() {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
for (let i = startIndex; i < endIndex; i++) {
const row = tableRows[i];
if (row) {
row.style.display = '';
}
}
}
// 更新翻页按钮状态
function updatePaginationButtons() {
if (currentPage === 1) {
prevBtn.disabled = true;
} else {
prevBtn.disabled = false;
}
if (currentPage === Math.ceil(tableRows.length / itemsPerPage)) {
nextBtn.disabled = true;
} else {
nextBtn.disabled = false;
}
}
// 上一页按钮点击事件处理程序
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
hideRows();
displayRows();
updatePaginationButtons();
displayCurrentPage();
}
});
// 下一页按钮点击事件处理程序
nextBtn.addEventListener('click', () => {
if (currentPage < Math.ceil(tableRows.length / itemsPerPage)) {
currentPage++;
hideRows();
displayRows();
updatePaginationButtons();
displayCurrentPage();
}
});
// 页面加载完成时显示第一页内容
hideRows();
displayRows();
updatePaginationButtons();
displayCurrentPage();