Как изменять количество страниц(пагинацию) в зависимости от фильтра?

Question

У меня есть 4 страницы и на каждой из них располагается по 4 карточки с контентом. Сверху поле ввода для текста, по которому я ввожу текст, нахожу и отображаю нужные карточки (что-то вроде фильтра). Внизу пагинация. Необходимо сделать так, чтобы при фильтре через этот input пересчитывалось количество страниц внизу в пагинации, то есть если по введенному тексту нашло две карточки, то в пагинации отображается только 1 страница с ними, а не все 4, и так далее. И так же точно необходимо сделать, если пользователь кликает на карточку и решает удалить ее. Реализовать это нужно без использования фреймворков, только нативный JS. Буду рада помощи, сделанный код и фильтр прикрепляю

let search = document.getElementById('search')
let filter = search.value.toUpperCase()
let card = document.getElementsByClassName('card')


 for (i = 0; i <card.length; i++) {
    let p = card[i].getElementsByTagName("p")[0];
    if (p.innerHTML.toUpperCase().indexOf(filter) > -1) {
      card[i].style.display = "";
    } else {
      card[i].style.display = "none";
    }
  }

 <input  id='search' type="search">  

<div class="card" style="width: 16.5rem;">
    <div  class='text-center py-4'>
    <img src="img/shirt_one.png"style="width: 6.25rem;" class="card-img-top" alt="clothes">
 
    <div class="card-body text-center d-flex flex-column justify-content-between ">
      <p class="card-title position-relative">Lorem ipsum
      </p>
      <p class="card-text price">$35.00</p>
   
    </div>
  
 
  </div>
  
  <div class="card" style="width: 16.5rem;">
    <div  class='text-center py-4'>
    <img src="img/shirt_one.png"style="width: 6.25rem;" class="card-img-top" alt="clothes">
 
    <div class="card-body text-center d-flex flex-column justify-content-between ">
      <p class="card-title position-relative">Content
      </p>
      <p class="card-text price">$35.00</p>
   
    </div>
  
 
  </div>
  
  <div class="card" style="width: 16.5rem;">
    <div  class='text-center py-4'>
    <img src="img/shirt_one.png"style="width: 6.25rem;" class="card-img-top" alt="clothes">
 
    <div class="card-body text-center d-flex flex-column justify-content-between ">
      <p class="card-title position-relative">Something
      </p>
      <p class="card-text price">$22.00</p>
   
    </div>
  
  <div class="card" style="width: 16.5rem;">
    <div  class='text-center py-4'>
    <img src="img/shirt_one.png"style="width: 6.25rem;" class="card-img-top" alt="clothes">
 
    <div class="card-body text-center d-flex flex-column justify-content-between ">
      <p class="card-title position-relative">Unknown
      </p>
      <p class="card-text price">$15.00</p>
   
    </div>
  
 
  </div>
 
  </div>


<nav>
  <ul class="pagination">
  
   
  
   
    <li class="page-item"><a class="page-link active" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
   
  </ul>
</nav>

БЛОГ НА HUSL

Как изменять количество страниц(пагинацию) в зависимости от фильтра?

Ответы (0 шт):