Tengo una matriz que consta de n elemento.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]y también tengo dos botones siguiente y anterior e inicialmente estoy mostrando los primeros 5 elementos (en la carga de la página) de una matriz matriz inicial [1, 2, 3, 4, 5]
cómo puedo mostrar los siguientes cinco elementos en el siguiente botón, haga clic en [6, 7, 8, 9, 10] y en el botón anterior, haga clic en mostrar el [1, 2, 3, 4, 5]
y también debe verificar si no tiene ningún elemento siguiente si se incluye lastIndex y si la matriz incluye el primer elemento.
he intentado usar slice para arr.slice(begin[, end])
Puede tomar un índice y un tamaño para los elementos deseados y dividir la matriz.
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], show = array => document.getElementById('items').innerHTML = array.join(' '), next = () => { index += size; while (index >= data.length) index -= size; show(data.slice(index, index + size)); }, prev = () => { index -= size; while (index < 0) index += size; show(data.slice(index, index + size)); }, size = 5; let index = 0; document.getElementById('bprev').addEventListener('click', prev); document.getElementById('bnext').addEventListener('click', next); show(data.slice(index, index + size)); <button id="bprev">prev</button> <span id="items"></span> <button id="bnext">next</button> const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] const size = 5 let current = 1 function prev(){ if(current > 1){ current-- let newArr = getNewArr() console.log(newArr) } } function next(){ if(current >= 1 && current < arr.length/size){ current++ let newArr = getNewArr() console.log(newArr) } } function getNewArr(){ return arr.slice(size*current - size, size*current) } <button onclick=prev()>prev</button> <button onclick=next()>next</button>Por ahora, solo estoy creando una demostración con el número de página codificado de pageNumber en los eventos de clic next y previous , pero puede hacerlo dinámico en función del tamaño de la matriz.
Demostración de trabajo:
// Input array const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Method which returns the updated array elements based on the pageSize and pageNumber. const paginate = (array, pageSize, pageNumber) => { return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize); } // On load initializing 5 elements. document.getElementById('content').innerHTML = paginate(arr, 5, 1); // Next button click event document.getElementById('next').onclick = function() { document.getElementById('content').innerHTML = paginate(arr, 5, 2); }; // previous button click event document.getElementById('previous').onclick = function() { document.getElementById('content').innerHTML = paginate(arr, 5, 1); }; <button id="previous">Previous</button> <span id="content"></span> <button id="next">Next</button>