Although most websites these day use an infinite scroll to load posts, there are few of us who prefer to use pagination. Yes, the infinite scroll looks cool. Many modern websites including Facebook and Twitter use infinite scroll but sometimes they don’t perform as good. They can be annoying at times especially when you don’t have the best network.

Whatever the reason, You want to implement a jQuery plugin that is easy to configure, lightweight and gets the job done without much hassle. That is why I created this article. To help you add a simple pagination to your website using jQuery.

I tried few jQuery pagination plugins so you wouldn’t have to. There are some really good ones but I settled with simplePagination.js at the end. It is easy to configure and has lots of options you can play around with. Oh and it has Bootstrap support, so that’s a plus point from me. 😉

Anyways, Here is a quick guide on how to properly set up this plugin into your webpage.

The HTML

Pretty standard HTML with list of items that you want to paginate. It could be a blog post, list items, anything you want.

<div class="list-wrapper">
    <div class="list-item">
        <h4>Iron Man</h4>
        <p>Iron Man is a 2008 American superhero film based on the Marvel Comics character of the same name, produced by Marvel Studios and distributed by Paramount Pictures. It is the first film in the Marvel Cinematic Universe (MCU). The film was directed by Jon Favreau, with a screenplay by the writing teams of Mark Fergus ...</p>
    </div>
    <div class="list-item">
        <h4>The Incredible Hulk</h4>
        <p>The Incredible Hulk is a 2008 American superhero film based on the Marvel Comics character the Hulk, produced by Marvel Studios and distributed by Universal Pictures. It is the second film in the Marvel Cinematic Universe (MCU). The film was directed by Louis Leterrier, with a screenplay by Zak Penn. It stars Edward ...</p>
    </div>
    ...
</div>
<div id="pagination-container"></div>

 

Just outside our wrapper I’ve added a div with an id of pagination-container. This is where the pagination will be rendered via Javascript.

The CSS

Bit of styling to match our overall design.

.list-wrapper {
  padding: 15px;
  overflow: hidden;
}
.list-item {
  border: 1px solid #EEE;
  background: #FFF;
  margin-bottom: 10px;
  padding: 10px;
  box-shadow: 0px 0px 10px 0px #EEE;
}
.list-item h4 {
  color: #FF7182;
  font-size: 18px;
  margin: 0 0 5px;
}
.list-item p {
  margin: 0;
}
.simple-pagination ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.simple-pagination li {
  display: inline-block;
  margin-right: 5px;
}
.simple-pagination li a, .simple-pagination li span {
  color: #666;
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #EEE;
  background-color: #FFF;
  box-shadow: 0px 0px 10px 0px #EEE;
}
.simple-pagination .current {
  color: #FFF;
  background-color: #FF7182;
  border-color: #FF7182;
}
.simple-pagination .prev.current, .simple-pagination .next.current {
  background: #e04e60;
}

 

The JS

And finally the Javascript for the pagination magic.

var items = $(".list-wrapper .list-item");
var numItems = items.length;
var perPage = 4;

items.slice(perPage).hide();

$('#pagination-container').pagination({
    items: numItems,
    itemsOnPage: perPage,
    prevText: "&laquo;",
    nextText: "&raquo;",
    onPageClick: function(pageNumber) {
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;
        items.hide().slice(showFrom, showTo).show();
    }
});

 

These are the basic options that you will need to enable pagination into your webpage. There are many other options that you can configure. Check out their documentation page.

Here is a quick demo that I created on CodePen.

See the Pen jQuery Pagination with simplePagination.js by Bijay Pakhrin (@monkeytempal) on CodePen.

Well that was easy. It is so much easier to create a pagination with this plugin. Hope you guys find this article helpful. Please let me know if it did. Thank you for reading.