没有任何框架或库的 vanilla 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>

我希望这就是你要找的伙伴