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>
<div>
  <input type="button" id="sort" value="SORTERA" onclick="sort(this)" data-order="asc" />
</div>
<br/>
<p>Click the button simultaneously to sort list in ascending and descending order.</p>
<p>Refresh page to shuffle list order.</p>
<br/>
<div class="tabset">
  <input type="radio" name="tabset" id="tab1" aria-controls="one" checked>
  <label for="tab1" class="tab" data-tab="pizza-list">1</label>
  <input type="radio" name="tabset" id="tab2" aria-controls="two">
  <label for="tab2" class="tab" data-tab="donut-list">2</label>
  <div class="tab-panels">
    <section id="one" class="tab-panel">
      <ul id="pizza-list" class="grid-container">
        <li>Margerita</li>
        <li>Amigo</li>
        <li>Jamaica</li>
        <li>Marinara</li>
        <li>Florida</li>
        <li>Caruso</li>
      </ul>
    </section>
    <section id="two" class="tab-panel">
      <ul id="donut-list" class="grid-container">
        <li>Africana</li>
        <li>Vegetale</li>
        <li>Quattro Stagioni</li>
        <li>Mexicanska</li>
        <li>Hawaii</li>
        <li>Ingen Köttpizza</li>
      </ul>
    </section>

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