My problem is When I Select page 2 i want to hide element 0-4 and show 5-8 but when i click 0-4 not hide I thing because My if condition can some one help me about if condition ? or another way to do ? and can i limit show data when load first time ?
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>To start on page 1 just do
document.querySelector("[data-page='1']").click();
To find the range
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>