Как я могу применить нумерацию страниц для отображения 3 элементов на странице - PullRequest
Новая
       49

Как я могу применить нумерацию страниц для отображения 3 элементов на странице

0 голосов
/ 29 января 2020

У меня есть список выбранных элементов, как показано ниже: 

<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.

1 Ответ

1 голос
/ 29 января 2020

Этот вопрос довольно широкий, однако, учитывая, что это решение не является отличным решением для длинных списков, приведенный ниже код поможет вам понять, что делать. 

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>
...