Condition pagination javascript-CodePudding

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>

CodePudding user response：

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 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)'
}
document.querySelector("[data-page='1']").click();

function onPage(event) {
  let itemDom = document.querySelectorAll('.pd')
  let 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 {
  margin: 0 10px;
}

<div>
  <div id="tourlek"></div>
  <div id="pagination"></div>
</div>