function getPagesList(pagesTotal, pagesItems, pagesMaxLength) {
if (pagesMaxLength < 5) throw "Length must be higher than 5 pages";
function range(start, end) {
return Array.from(Array(end - start + 1), (_, i) => i + start);
}
var sideWidth = pagesMaxLength < 9 ? 1 : 2;
var leftWidth = (pagesMaxLength - sideWidth * 2 - 3) >> 1;
var rightWidth = (pagesMaxLength - sideWidth * 2 - 2) >> 1;
if (pagesTotal <= pagesMaxLength) {
return range(1, pagesTotal);
}
if (pagesItems <= pagesMaxLength - sideWidth - 1 - rightWidth) {
return range(1, pagesMaxLength - sideWidth - 1)
.concat(0, range(pagesTotal - sideWidth + 1, pagesTotal));
}
if (pagesItems >= pagesTotal - sideWidth - 1 - rightWidth) {
return range(1, sideWidth)
.concat(0, range(pagesTotal - sideWidth - 1 - rightWidth - leftWidth, pagesTotal));
}
return range(1, sideWidth)
.concat(0, range(pagesItems - leftWidth, pagesItems + rightWidth),
0, range(pagesTotal - sideWidth + 1, pagesTotal));
}
$(function() {
var pagesLength = $("#demo-content-container .demo-content").length;
var pagesLimit = 1;
var pagesTotal = Math.ceil(pagesLength / pagesLimit);
var pagesPaginationLength = 9;
var pagesCurrent;
function pageShow(pageWhich) {
if (pageWhich < 1 || pageWhich > pagesTotal) return false;
pagesCurrent = pageWhich;
$("#demo-content-container .demo-content").hide()
.slice((pagesCurrent - 1) * pagesLimit,
pagesCurrent * pagesLimit).show();
$(".pagination li").slice(1, -1).remove();
getPagesList(pagesTotal, pagesCurrent, pagesPaginationLength).forEach(item => {
$("<li>").addClass("page-item")
.addClass(item ? "current-item" : "disabled")
.toggleClass("active", item === pagesCurrent).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text(item || "...")
).insertBefore("#next-page");
});
$("#previous-page").toggleClass("disabled", pagesCurrent === 1);
$("#next-page").toggleClass("disabled", pagesCurrent === pagesTotal);
return true;
}
$(".pagination").append(
$("<li>").addClass("page-item").attr({
id: "previous-page"
}).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text("«")
),
$("<li>").addClass("page-item").attr({
id: "next-page"
}).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text("»")
)
);
$("#demo-content-container").show();
pageShow(1);
$(document).on("click", ".pagination li.current-item:not(.active)", function() {
return pageShow(+$(this).text());
});
$("#next-page").on("click", function() {
return pageShow(pagesCurrent + 1);
});
// keyboard navigation ->:
$(document).keydown(function(e) {
if (e.which == 39) {
return pageShow(pagesCurrent + 1);
}
});
$("#previous-page").on("click", function() {
return pageShow(pagesCurrent - 1);
});
// keyboard navigation <- : 
$(document).keydown(function(e) {
if (e.which == 37) {
return pageShow(pagesCurrent - 1);
}
});
});