Pagination Example

Pagination with Bootstrap

by kayenglajom

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
<input type="button" id="sort" value="SORTERA" />
<div class="jumbotron page" id="page1">

  <ul id="pizza-list" class="grid-container">
    <li class="block first">Margerita</li>

    <li class="block first">Amigo</li>

    <li class="block first">Jamaica</li>

    <li class="block first">Marinara</li>

    <li class="block first">Florida</li>

    <li class="block first">Caruso</li>
  </ul>
</div>
<div class="jumbotron page" id="page2">
  <ul id="pizza-list" class="grid-container">
    <li class="block second">Africana</li>

    <li class="block second">Vegetale</li>

    <li class="block second">Quattro Stagioni</li>

    <li class="block second">Mexicanska</li>

    <li class="block second">Hawaii</li>

    <li class="block second">Ingen Köttpizza</li>
  </ul>
</div>

<ul id="pagination-demo" class="pagination-lg pull-right"></ul>

CSS

.container {
  margin-top: 20px;
}

.page {
  display: none;
}

.page-active {
  display: block;
}

JavaScript

$('#pagination-demo').twbsPagination({
  totalPages: 2,
  // the current page that show on start
  startPage: 1,

  // maximum visible pages
  visiblePages: 2,

  initiateStartPageClick: true,

  // template for pagination links
  href: false,

  // variable name in href template for page number
  hrefVariable: '{{number}}',

  // Text labels
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',

  // carousel-style pagination
  loop: false,

  // callback function
  onPageClick: function(event, page) {
    $('.page-active').removeClass('page-active');
    $('#page' + page).addClass('page-active');
  },

  // pagination Classes
  paginationClass: 'pagination',
  nextClass: 'next',
  prevClass: 'prev',
  lastClass: 'last',
  firstClass: 'first',
  pageClass: 'page',
  activeClass: 'active',
  disabledClass: 'disabled'

});

function sort(sel) {
  var items = [];
  var listarray = document.getElementsByTagName('li');
  for (var l = 0; l < listarray.length; l++) {
    items.push(listarray[l].textContent);
  }
  if (sel.getAttribute('data-order') == 'asc') {
    sel.setAttribute('data-order', 'desc');
    items.sort();
    console.log(items);
  } else {
    sel.setAttribute('data-order', 'asc');
    items.sort();
    items.reverse();
    console.log(items);
  }

  var ul = document.getElementsByTagName('ul');
  var temp = 0;
  for (var l = 0; l < ul.length; l++) {
    console.log(ul[l].innerHTML);
    ul[l].innerHTML = "";
    for (var i = 0; i < 6; i++) {
      var new_li = document.createElement('li');
      new_li.appendChild(document.createTextNode(items[temp++]));
      ul[l].appendChild(new_li);
    }
  }
}