在没有任何框架或库的香草Javascript中分页

Question

堆栈溢出！我有一项任务是创建可排序/动态表，其中包含添加和删除内容的选项，我已经做到了。然而，我的最后一项任务就是每页分页20行，这就是我10天的Javascript知识受到高度考验的地方。也就是说，我甚至不能把我的脚放在地上。

有人能帮助我理解分页创建背后的逻辑吗？

Answer 1

以下是为每页20个元素的表分页的代码：

使用以下内容编辑函数loadTableData()：

//Pagination
function loadTableData(movieData, page_size, page_number) {
// human-readable page numbers usually start with 1, so we reduce 1 in the first argument
var movieDatap = movieData.slice((page_number - 1) * page_size, page_number * page_size);
const tableBody = document.getElementById('tableData');
let txt = '';
for (let i = 0; i < movieDatap.length; i++) {

txt = txt + `<tr><td>${movieDatap[i].name}</td>
<td>${movieDatap[i].genre}</td><td>${movieDatap[i].rating}</td>
<td><button onclick="deleteRow(${i});">Delete</button>
<button onclick="editRow(${i});">Edit</button></td></tr>`;

}                                                     
tableBody.innerHTML = txt;

}
function decreaseTableDatas(){
var value = parseInt(document.getElementById('pagenumber').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('pagenumber').value = value;
loadTableData(movieData, 20, value);
}
function incrementTableDatas(){
var value = parseInt(document.getElementById('pagenumber').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('pagenumber').value = value;
loadTableData(movieData, 20, value);
}
window.onload = () => {
loadTableData(movieData, 20, 1);
}

用以下内容更新HTML：

<div class="pagination">
<div class="pagination-block">
<span class="pageButton outline-none" onclick="decreaseTableDatas()" id="button_prev">Prev</span>
<input type="button" value="1" id="pagenumber" />
<span class="pageButton outline-none" onclick="incrementTableDatas()" id="button_next">Next</span>
</div>
</div>

我希望这就是你正在寻找的伙伴