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

Question

计算器溢出！我有一项任务是创建 sortable/dynamic table，其中包含添加和删除内容的选项，我已经成功完成了。然而，我的最后一项任务是制作每页 20 行的分页，这就是我 10 天 Javascript 知识的高考。也就是说，我什至不能把我的脚放在地上。

谁能帮我理解创建分页背后的逻辑？

Answer 1

这里是 table 每页 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>

希望这就是您要找的伙伴

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

Pagination in vanilla Javascript without any frameworks or libraries

javascript

arrays

pagination