在没有任何框架或库的情况下使用 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>

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