Mi problema es que cuando selecciono la página 2, quiero ocultar el elemento 0-4 y mostrar 5-8, pero cuando hago clic en 0-4 no lo oculto porque mi condición si ¿alguien puede ayudarme con la condición si? u otra forma de hacerlo? ¿Puedo limitar los datos mostrados cuando se cargan por primera vez?
let data = Array.from(Array(15).keys()).map(item => ({ topic: `Header ${item}`, detail: `Detail ${item}`})) let tourlek = document.querySelector('#tourlek') let pagination = document.querySelector('#pagination') let itemPage = document.getElementsByTagName('item-page') let item = data.length let page = 1 let limit = 4 let limitFn = Math.ceil(item / limit) for (let i = 0; i < item; i++) { let div = document.createElement('div') div.textContent = `${data[i].topic} - ${data[i].detail}` div.classList = 'pd' tourlek.appendChild(div) } for (let i = page; i <= limitFn; i++){ let a = document.createElement('a') a.textContent = `P:${page}` // addEventListener onPage function when click a.addEventListener('click', onPage) a.setAttribute('data-page', page) page = page + 1 pagination.appendChild(a).href = 'javascript:void(0)' } function onPage (event) { let itemDom = document.querySelectorAll('.pd') let currentPage = event.target.getAttribute('data-page') for (let i = 0; i < itemDom.length; i++) { if (i >= limit * currentPage ) { itemDom[i].style.display = 'none' // console.log(0 < limit * currentPage ) } else { itemDom[i].style.display = '' } } console.log(event.target.getAttribute('data-page')) } a { margin: 0 10px; } <div> <div id="tourlek"></div> <div id="pagination"></div> </div>Para comenzar en la página 1 solo haz
document.querySelector("[data-page='1']").click();
Para encontrar el rango
const lim = currentPage * limit for (let i = 0; i < itemDom.length; i++) { itemDom[i].hidden = i > lim || i < lim -limit } let data = Array.from(Array(15).keys()).map(item => ({ topic: `Header ${item}`, detail: `Detail ${item}` })) let tourlek = document.querySelector('#tourlek') let pagination = document.querySelector('#pagination') let itemPage = document.getElementsByTagName('item-page') let currentPage = 1; let item = data.length let page = 1 let limit = 4 let limitFn = Math.ceil(item / limit) let lastPage = 1; for (let i = 0; i < item; i++) { let div = document.createElement('div') div.textContent = `${data[i].topic} - ${data[i].detail}` div.classList = 'pd' tourlek.appendChild(div) } document.querySelector(".box").addEventListener("click", onPage) for (let i = page; i <= limitFn; i++) { let a = document.createElement('a') a.textContent = `P:${page}` a.setAttribute('data-page', page) page = page + 1 pagination.appendChild(a).href = 'javascript:void(0)' } document.querySelector("[data-page='1']").click(); function onPage(event) { const tgt = event.target; if (tgt.id === "arwL") { const p = currentPage - 1 if (p===0) return document.querySelector(`[data-page='${p}']`).click() return; } if (tgt.id === "arwR") { const p = +currentPage + 1 if (p>=data.length) return document.querySelector(`[data-page='${p}']`).click() return; } let itemDom = document.querySelectorAll('.pd') currentPage = event.target.dataset.page; const lim = currentPage * limit for (let i = 0; i < itemDom.length; i++) { itemDom[i].hidden = i > lim || i < lim - limit } } a { padding: 0 10px; } .box { display: flex; } #arwL, #arwR { cursor: pointer } <div> <div id="tourlek"></div> <div class='box'> <div id="arwL"><</div> <div id="pagination"></div> <div id="arwR">></div> </div> </div>