ethpagin

pagination

by slawe

HTML

<div class="pagination">
  <div>
    <nav>
      <ul>
        <li>
          <a href="#" id="pagin_first">First</a>
        </li>
        <li>
          <a href="#" id="pagin_previous">
            <img src="https://ethanalytics.io/img/angle_left.svg" alt="Previous" />
          </a>
        </li>
        <li>
          <span>Page <span id="pagin_output"></span></span>
        </li>
        <li>
          <a href="#" id="pagin_next">
            <img src="https://ethanalytics.io/img/angle_right.svg" alt="Next" />
          </a>
        </li>
        <li>
          <a href="#" id="pagin_last">Last</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS

.pagination {
  display:flex;
  align-items: center;
  align-content: center;
  color:#8C8C8C;
}

.pagination div:first-child {

}

.pagination div:last-child {
  margin-left:auto;
}

.pagination div:last-child ul li {
  display:inline-block;
}

.pagination div:last-child ul li a {
  color:#8C8C8C;
  text-decoration: none;
  display:inline-block;
  font-size:1.2rem;
  padding:7px 8px;
  background:white;
  border:solid 1px #E5E5E5;
  border-radius: 8px;
  padding-top: 10px;
  padding-bottom: 7px;
}

.pagination div:last-child ul li:nth-child(2) a, #table .pagination div:last-child ul li:nth-child(4) a{
  padding-top: 9px;
  padding-bottom: 6px;
}

.pagination div:last-child ul li:nth-child(2) a {
  padding-right:10px;
}

.pagination div:last-child ul li:nth-child(4) a{
  padding-left:10px;
}

JavaScript

var pagination = function(page, totalPages)
{
	let first = $('#pagin_first'),
  		previous = $('#pagin_previous'),
      next = $('#pagin_next'),
      last = $('#pagin_last'),
      output = $('#pagin_output');
      
  changePage(page);
  
  first.on('click', function() {
  	page = 1;
  	changePage(page);
  });
  
  previous.on('click', function() {
  	if (page > 1) {
        page--;
        changePage(page);
    }
  });
  
  next.on('click', function() {
  	if (page < totalPages) {
        page++;
        changePage(page);
    }
  });
  
  
  last.on('click', function() {
  	page = totalPages
  	changePage(page);
  });
      
  function changePage(page)
	{
    // Validate page
    if (page < 1) page = 1;
    if (page > totalPages) page = totalPages;

    output.html(page + ' of ' + totalPages);
    
    return(page);
	}
}

$(document).ready(pagination(3, 21));