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);
    }
  }
}