Pagination Example

Pagination with Bootstrap

by sherlene04

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 class="container">
  <div class="jumbotron page" id="page1">
    <div class="container">
      <h1 class="display-3">Adding Pagination to your Website</h1>
      <p class="lead">In this article we teach you how to add pagination, an excellent way to navigate large amounts of content, to your website using a jQuery Bootstrap Plugin.</p>
      <p><a class="btn btn-lg btn-success" href="https://www.solodev.com/blog/web-design/adding-pagination-to-your-website.stml" role="button">Learn More</a></p>
    </div>
  </div>
  <div class="jumbotron page" id="page2">
    <h1 class="display-3">Not Another Jumbotron</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
  </div>
  <div class="jumbotron page" id="page3">
    <h1 class="display-3">Data. Data. Data.</h1>
    <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/navbar" role="button">View navbar docs »</a>
    </p>
  </div>
  <div class="jumbotron page" id="page4">
    <h1 style="-webkit-user-select: auto;">Buy Now!</h1>
    <p class="lead" style="-webkit-user-select: auto;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
    <p...

CSS

.container {
  margin-top: 20px;
}

.page {
  display: none;
}

.page-active {
  display: block;
}

JavaScript

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

  // maximum visible pages
  visiblePages: 5,

  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'

});