堆疊溢位！我有一個任務來創建可排序/動態表，其中包含添加和洗掉內容的選項，我已經設法做到了。然而，我的最后一個任務是對每頁 20 行進行分頁，這就是對我 10 天的 Javascript 知識進行高度測驗的地方。也就是說，我什至不能把我的腳放在地上。
任何人都可以幫助我理解創建分頁背后的邏輯嗎？
uj5u.com熱心網友回復：
這是為每頁 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>
我希望這就是你正在尋找的伴侶
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/339080.html
標籤：javascript 数组 分页
上一篇：向物件添加屬性陣列