I have an array which consist n element.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
and also have two button next and prev and initially i am showing the first 5 element(on page load) of an array initial array [1, 2, 3, 4, 5]
how i can show the next five elements on the next button click [6, 7, 8, 9, 10] and on previous button click want to show the [1, 2, 3, 4, 5]
and also need to check the if it does not have any next element if lastIndex is included and if array includes first element.
i have tried using slice to arr.slice(begin[, end])
You could take an index and a size for the wanted elements ans dlice the array.
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>For now I am just creating a demo with the hardcoded pageNumber in next and previous click events but you can make it dynamic based on the array size.
Working Demo :
// 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>