Business Catalyst Pagination

by Ryan Perez

HTML

<ul id="webapp26325pagination" class=" webapp">
  <li class="pag-current">1</li>
  <li class="pag-number"><a href="/websites/blog?A=WebApp&amp;CCID=26325&amp;Page=2&amp;Items=8">2</a></li>
  <li class="pag-number"><a href="/websites/blog?A=WebApp&amp;CCID=26325&amp;Page=3&amp;Items=8">3</a></li>
  <li class="pag-number"><a href="/websites/blog?A=WebApp&amp;CCID=26325&amp;Page=4&amp;Items=8">4</a></li>
  <li class="pag-number"><a href="/websites/blog?A=WebApp&amp;CCID=26325&amp;Page=5&amp;Items=8">5</a></li>
  <li class="pag-next"><a href="/websites/blog?A=WebApp&amp;CCID=26325&amp;Page=2&amp;Items=8">Next</a></li>
</ul>

<nav>
  <div class="container">
    <div class="row">

      <ul class="pagination pagination-lg">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item"><a class="page-link" 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="#" aria-label="Next">
            <span aria-hidden="true">»</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>

    </div>
  </div>

</nav>

JavaScript

$('.pagination-lg').children().remove();

$('#webapp26325pagination li').each(function() {

  $(this).removeClass('pag-current pag-number pag-next').addClass('page-item');

});



$('#webapp26325pagination').children().appendTo('.pagination-lg');