JS Pagination

by kthornbloom

HTML

<div class="customer-reviews">

<div class="review-customer-box">
FIRST
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>
<div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's goood.
</div><div class="review-customer-box">
it's goood.
</div>
<div class="review-customer-box">
it's bad.
</div>

</div>

<div class="pagination">
<button id="pag-prev">Prev</button> 
<form id="pag-form">
<input type="number" value="1" id="pag-current" step="1" min="0">
</form>
of <span id="pag-max"></span> 
<button id="pag-next">Next</button>
</div>

CSS

form {
  display: inline-block;
}

JavaScript

var allReviews = [...document.querySelectorAll('.review-customer-box')],
		reviewParent = document.querySelector('.customer-reviews'),
    pagNext = document.getElementById('pag-next'),
    pagPrev = document.getElementById('pag-prev'),
    pagCurrent = document.getElementById('pag-current'),
    pagMax = document.getElementById('pag-max'),
    pagForm = document.getElementById('pag-form'),
    paginationWrap = document.querySelector('.pagination'),
		reviewMax = 10,
    iteration = 1,
    numPages = Math.ceil(allReviews.length / reviewMax);
    
if(allReviews.length > reviewMax){

  pagMax.innerHTML = numPages;
  pagCurrent.setAttribute("max",numPages);
  
  function buildPage(){
    var showArray =  allReviews.slice((reviewMax * iteration - reviewMax), reviewMax * iteration),
        showItems = '';
    for (let i = 0; i < showArray.length; i++) {
      showItems += showArray[i].outerHTML;
    }
    
    if(iteration >= numPages){
    	pagNext.setAttribute("disabled","true");
    } else if (iteration <= 1){
    	pagPrev.setAttribute("disabled","true");
    } else {
    	pagPrev.removeAttribute("disabled");
      pagNext.removeAttribute("disabled");
    }
    
    reviewParent.innerHTML = showItems;
    pagCurrent.setAttribute("value",iteration);
  }
  buildPage();

	pagNext.addEventListener('click', function(e){
  	e.preventDefault();
  	if(allReviews.length > numPages){
  		iteration++;
    	buildPage();
    }
  })
  
  pagPrev.addEventListener('click', function(e){
  	e.preventDefault();
  	if(iteration > 1){
  		iteration--;
    	buildPage();
    }
  })
  
  pagForm.addEventListener('submit', function(e){
  	e.preventDefault();
    if(iteration != pagCurrent.value){
  		iteration = pagCurrent.value;
    	buildPage();
    }
  })

} else {
	paginationWrap.remove();
}