JavaScript pagination – jQuery pagination plugin – Pagination.js
|A jQuery plugin to provide simple yet fully customizable JavaScript pagination.
Pagination.js – JavaScript pagination
A jQuery plugin to provide simple yet fully customisable pagination. Despite of infinite scroll popularity, classic pagination is still important requirement of many modern web applications. Pagination.js is a good solution, that brings us pagination solution for our front-ends.

Setup
<div id="data-container"></div> <div id="pagination-container"></div>
Sample
$('#pagination-container').pagination({ dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195], callback: function(data, pagination) { // template method of yourself var html = template(data); $('#data-container').html(html); } }) // A minimal rendering method: function simpleTemplating(data) { var html = '<ul>'; $.each(data, function(index, item){ html += '<li>'+ item +'</li>'; }); html += '</ul>'; return html; }
To make it easier to maintain, you’d better use specialized templating engine to do that. Such as Handlebars and Undercore.template.
Handlebars
<script type="text/template" id="template-demo"> <ul> {{#each data}} <li>{{this}}</li> {{/each}} </ul> </script>
$('#pagination-container').pagination({ dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195], callback: function(data, pagination) { var html = Handlebars.compile($('#template-demo').html(), { data: data }); $('#data-container').html(html); } })
Underscore
<script type="text/template" id="template-demo"> <ul> <% for (var i = 0, len = data.length; i < len; i++) { %> <li><%= data[i] %></li> <% } %> </ul> </script>
$('#pagination-container').pagination({ dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195], callback: function(data, pagination) { var html = _.template($('#template-demo').html(), { data: data }); $('#data-container').html(html); } })
License: MIT
Homepage
GitHub
https://github.com/superRaytin/paginationjs
See also
Select2 – the jQuery replacement for select boxes
pagePiling.js – create scrolling pile of sections
Vue.js scroll to element solutions
Tutorial: Mustache JS, jQuery and Express JS in action
Enjoy!