Pagination for tools

by Shawn Wood

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<ul id="toolList" class="list-unstyled row">
    <li class="col-md-3">Item 1</li>
    <li class="col-md-3">Item 2</li>
    <li class="col-md-3">Item 3</li>
    <li class="col-md-3">Item 4</li>
    <li class="col-md-3">Item 5</li>
    <li class="col-md-3">Item 6</li>
    <li class="col-md-3">Item 7</li>
    <li class="col-md-3">Item 8</li>
    <li class="col-md-3">Item 9</li>
    <li class="col-md-3">Item 10</li>
    <li class="col-md-3">Item 11</li>
    <li class="col-md-3">Item 12</li>
    <li class="col-md-3">Item 13</li>
    <li class="col-md-3">Item 14</li>
    <li class="col-md-3">Item 15</li>
    <li class="col-md-3">Item 16</li>
    <li class="col-md-3">Item 17</li>
    <li class="col-md-3">Item 18</li>
    <li class="col-md-3">Item 19</li>
    <li class="col-md-3">Item 20</li>
    <li class="col-md-3">Item 21</li>
    <li class="col-md-3">Item 22</li>
    <li class="col-md-3">Item 23</li>
    <li class="col-md-3">Item 24</li>
    <li class="col-md-3">Item 25</li>
    <li class="col-md-3">Item 26</li>
    <li class="col-md-3">Item 27</li>
    <li class="col-md-3">Item 28</li>
    <li class="col-md-3">Item 29</li>
    <li class="col-md-3">Item 30</li>
</ul>

CSS

a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}a.close.disabled{pointer-events:none}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto...

JavaScript

var generatePagination = function(configuration) {
  if (typeof configuration === 'undefined' || configuration === null) {
    configuration = {
      "listID": "toolList"
    };
  }
  let paginationLimit = [12, 24, 48, 96];
  let paginationElements = '<div class="pageination row"><div class="col-md-4"><div class="current-page"></div></div>' +
    '<div class="col-md-4 text-center"><button class="prev"><</button><button class="next">></button></div><div class="col-md-4 text-right"><label for="' + configuration.listID + '">Items Per Page </label> <select id="' + configuration.listID + '" class="form-control">';
    for(let i = 0; i < paginationLimit.length; i++){
    	paginationElements += '<option value="' + paginationLimit[i] + '">' + paginationLimit[i] + '</option>';
    }
    paginationElements += '</select></div></div>';


  $(paginationElements).insertAfter('#' + configuration.listID);



  var articleLimit = paginationLimit[0];
  var currentPage = 1;
  var $currentPage = $('.current-page');
  var $articles = $('#toolList li');
  var totalArticles = $articles.length;
  var totalPages = Math.floor(totalArticles / articleLimit);
  console.log(totalArticles);
  console.log(totalPages);
  $articles.hide();
  $currentPage.html(currentPage);
  changePage();

  $('.next').on('click', function() {
    currentPage++;
    if (currentPage > totalPages) {
      currentPage = 1;
    }
    changePage();
  });
  $('.prev').on('click', function() {
    currentPage--;
    if (currentPage < 1) {
      currentPage = totalPages;
    }
    changePage();
  });

  function changePage() {
    $articles.hide();
    $currentPage.html(currentPage);
    $($articles[currentPage * articleLimit - 1]).show();
    $($articles[currentPage * articleLimit - 2]).show();
  }


}
$(document).ready(function() {
  generatePagination();
});