Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding Pagination to your Website

In this article we teach you how to add pagination, an excellent way to navigate large amounts of content, to your website.

In this article, Solodev will teach you how to add pagination, an excellent way to navigate large amounts of content, to your website using a jQuery Bootstrap Plugin. Pagination allows you to make large amounts of content easy to find and breaks up several entries or web content into multiple pages, allowing you to toggle through content with ease.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Add the HTML below to your web page

//Swap out the content with your own
<div class="container">
  <div class="jumbotron page" id="page1">
    <div class="container">
      <h1 class="display-3">Adding Pagination to your Website</h1><br>
      <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><br>
      <p><a class="btn btn-lg btn-success" href="#" 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 style="-webkit-user-select: auto;"><a class="btn btn-lg btn-success" href="#" role="button" style="-webkit-user-select: auto;">Get started today</a></p>
  </div>
  <div class="jumbotron page" id="page5">
    <h1 class="cover-heading">Cover your page.</h1>
    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
    <p class="lead"><a href="#" class="btn btn-lg btn-primary">Learn more</a></p>
  </div>
  <ul id="pagination-demo" class="pagination-lg pull-right"></ul>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

.container {
  margin-top: 20px;
}
.page {
  display: none;
}
.page-active {
  display: block;
}

Step 3 - Add the JavaScript below to a file called paging.js

$('#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'

});

Step 4 - Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
<script src="paging.js"></script>

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev