¡Desbordamiento de pila! Recibí una tarea para crear una tabla ordenable/dinámica con opciones para agregar y eliminar contenido y logré hacerlo. Sin embargo, mi última tarea es hacer una paginación de 20 filas por página y ahí es donde mi conocimiento de Javascript de 10 días se pone a prueba. Es decir, ni siquiera puedo poner mi pie en el suelo.
¿Alguien puede ayudarme a comprender la lógica detrás de la creación de la paginación?
aquí está el código para paginar su tabla para 20 elementos por página:
Edite la función loadTableData() con esto:
//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); }Actualice el HTML con esto:
<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>Espero que sea eso lo que buscas amigo