如何应用分页以每页显示 3 个项目

Question

我有一个获取的项目列表如下：

<ul id="products" class="abcd" style="display: block;">
    <li class="productslist">item1</li>
    <li class="productslist">item2</li>
    <li class="productslist">item3</li>
    <li class="productslist">item4</li>
    <li class="productslist">item5</li>
    <li class="productslist">item6</li>
    <li class="productslist">item7</li>
    <li class="productslist">item8</li>
    <li class="productslist">item9</li>
    <li class="productslist">item10</li>
    <li class="productslist">item11</li>
    <li class="productslist">item12</li>
    <li class="productslist">item13</li>
</ul>

现在我需要在应用分页后每页显示 3 个项目。请帮助我使用 Javascript。

Answer 1

这个问题相当广泛，但是考虑到这个解决方案对于较长的列表来说不是一个很好的解决方案，下面的代码将帮助您了解该怎么做。

const list = [...document.querySelectorAll('.productslist')];
let count = 0;
const items_per_page = 3;
const pagination_numbers_container = document.querySelector('.pagination-numbers');

const paginate = (p) => {
  
  hideAll();
   
  if(p === 'next') count += items_per_page;
  else if(p === 'previous') count -= items_per_page;
  else count = p;
 
  if(count < 0 ) count = 0;
  else if(count >= (list.length - items_per_page)) count = (list.length - items_per_page) + ((list.length+1) % items_per_page);
  
  for(let i = count; i < (count+items_per_page); i++) {
    if(list[i]) list[i].style.display = 'block';
  }
  
}


const paginateNumberClickHandler = (evt) => {
	const page = parseInt(evt.currentTarget.getAttribute('data-page'));
  paginate(page * items_per_page)
}

const createPaginationNumbers = () => {
  
  const total_pages_rest = list.length % items_per_page;
  const total_pages = (list.length / items_per_page);
  const pagination_numbers = [];
  pagination_numbers_container.innerHTML = '';
  for(let i = 0; i < total_pages; i++) {
    pagination_numbers_container.innerHTML += `<button data-page="${i}" class="pag">${i+1}</button>`;
  }
    
  [...document.querySelectorAll('.pag')].forEach( (p) => p.addEventListener('click', paginateNumberClickHandler ));
}

const hideAll = () => list.forEach( (l) => l.style.display = 'none');

const next = document.querySelector('.next');
const previous = document.querySelector('.previous');
next.addEventListener('click', (e) => paginate("next"));
previous.addEventListener('click', (e) => paginate("previous"));


paginate(0);
createPaginationNumbers();

<ul id="products" class="abcd" style="display: block;">
<li class="productslist">item1</li>
<li class="productslist">item2</li>
<li class="productslist">item3</li>
<li class="productslist">item4</li>
<li class="productslist">item5</li>
<li class="productslist">item6</li>
<li class="productslist">item7</li>
<li class="productslist">item8</li>
<li class="productslist">item9</li>
<li class="productslist">item10</li>
<li class="productslist">item11</li>
<li class="productslist">item12</li>
<li class="productslist">item13</li>
</ul>
<div class="pagination-numbers">
  
</div>
<button class="previous">
Previous
</button>
<button class="next">
Next
</button>