Modifying JavaScript Pagination to Display All Pages
Tools
3
A webpage oirginally cnotains 20 pages of list data but only displays the first 10 pages. To modify the JavaScript injection and reload the page too show all pages, follow these steps.
First, acess the source code via F12 → Sources → page-top.js. Locate the JavaScript code related to page loading. The original source code is as follows:
;(function ($, win, doc, undef) {
'use strict';
function Paginator(el, opts) {
this.el = el;
this.opts = {
currentPage: opts.currentPage || 1,
totalPages: opts.totalPages,
totalItems: opts.totalItems,
allowJump: opts.allowJump || 0,
showSingle: opts.showSingle || 1,
maxButtons: (opts.maxButtons >= 6 ? 6 : opts.maxButtons) || 10,
onPageChange: opts.onPageChange
};
this.initialize();
}
Paginator.prototype = {
constructor: Paginator,
initialize: function() {
this.render();
this.attachEvents();
this.updateState();
},
render: function() {
var self = this;
var curPage = this.opts.currentPage;
var totPages = this.opts.totalPages;
var totItems = this.opts.totalItems;
var maxBtns = this.opts.maxButtons;
var allowJump = this.opts.allowJump;
var showSingle = this.opts.showSingle;
var html = [];
curPage = curPage > totPages ? totPages : curPage;
curPage = curPage < 1 ? 1 : curPage;
if (showSingle && totPages === 1) {
return '';
}
var activePage = $("#page").find("li.xl-active").text();
html.push("<ul>");
html.push("Total " + totItems + " items");
if (totPages > 10) {
for (var i = 1; i <= 10; i++) {
if (curPage !== i) {
html.push("<li>" + i + "</li>");
} else {
html.push("<li class='xl-active'>" + i + "</li>");
}
}
} else {
for (var i = 1; i <= totPages; i++) {
if (curPage !== i) {
html.push("<li>" + i + "</li>");
} else {
html.push("<li class='xl-active'>" + i + "</li>");
}
}
}
if (allowJump) {
html.push("<li class='xl-jumpText xl-disabled'>Jump to <input type='number' id='xlJumpNum' style='border:1px;'> page</li>");
html.push("<li class='xl-jumpButton'>Confirm</li>");
}
if (totPages > 10) {
html.push("<li class='xl-disabled'>...</li>");
}
html.push("</ul>");
self.el.html(html.join(''));
setTimeout(function () {
self.updateState();
}, 20);
},
attachEvents: function() {
var self = this;
self.el.off('click', 'li');
self.el.on('click', 'li', function () {
var cls = $(this).attr('class');
var pageNum = parseInt($(this).html());
var curPage = self.opts.currentPage;
if ($(this).hasClass('xl-disabled') || cls === 'xl-jumpText') {
return '';
}
if (cls === 'xl-prevPage') {
if (curPage !== 1) {
self.opts.currentPage -= 1;
}
} else if (cls === 'xl-nextPage') {
if (curPage !== self.opts.totalPages) {
self.opts.currentPage += 1;
}
} else if (cls === 'xl-jumpButton') {
self.opts.currentPage = Number($('#xlJumpNum').val());
} else {
self.opts.currentPage = pageNum;
}
self.render();
if (self.opts.onPageChange) {
self.opts.onPageChange(self.opts.currentPage);
}
});
},
updateState: function () {
var self = this;
var curPage = self.opts.currentPage;
var totPages = self.opts.totalPages;
if (curPage === 1) {
self.el.children().children('.xl-prevPage').addClass('xl-disabled');
} else if (curPage === totPages) {
self.el.children().children('.xl-nextPage').addClass('xl-disabled');
}
}
}
$.fn.paginate = function (opts) {
return new Paginator($(this), opts);
}
})(jQuery, window, document);
To display all pages, modify the JavaScript by removing the condition that limits display to 10 pages. The revised code is shown below. Inject this modified JavaScript into the page using page.evaluate() in a testing or automation context.
;(function ($, win, doc, undef) {
'use strict';
function Paginator(el, opts) {
this.el = el;
this.opts = {
currentPage: opts.currentPage || 1,
totalPages: opts.totalPages,
totalItems: opts.totalItems,
allowJump: opts.allowJump || 0,
showSingle: opts.showSingle || 1,
maxButtons: (opts.maxButtons >= 6 ? 6 : opts.maxButtons) || 10,
onPageChange: opts.onPageChange
};
this.initialize();
}
Paginator.prototype = {
constructor: Paginator,
initialize: function() {
this.render();
this.attachEvents();
this.updateState();
},
render: function() {
var self = this;
var curPage = this.opts.currentPage;
var totPages = this.opts.totalPages;
var totItems = this.opts.totalItems;
var maxBtns = this.opts.maxButtons;
var allowJump = this.opts.allowJump;
var showSingle = this.opts.showSingle;
var html = [];
curPage = curPage > totPages ? totPages : curPage;
curPage = curPage < 1 ? 1 : curPage;
if (showSingle && totPages === 1) {
return '';
}
var activePage = $("#page").find("li.xl-active").text();
html.push("<ul>");
html.push("Total " + totItems + " items");
for (var i = 1; i <= totPages; i++) {
if (curPage !== i) {
html.push("<li>" + i + "</li>");
} else {
html.push("<li class='xl-active'>" + i + "</li>");
}
}
if (allowJump) {
html.push("<li class='xl-jumpText xl-disabled'>Jump to <input type='number' id='xlJumpNum' style='border:1px;'> page</li>");
html.push("<li class='xl-jumpButton'>Confirm</li>");
}
html.push("</ul>");
self.el.html(html.join(''));
setTimeout(function () {
self.updateState();
}, 20);
},
attachEvents: function() {
var self = this;
self.el.off('click', 'li');
self.el.on('click', 'li', function () {
var cls = $(this).attr('class');
var pageNum = parseInt($(this).html());
var curPage = self.opts.currentPage;
if ($(this).hasClass('xl-disabled') || cls === 'xl-jumpText') {
return '';
}
if (cls === 'xl-prevPage') {
if (curPage !== 1) {
self.opts.currentPage -= 1;
}
} else if (cls === 'xl-nextPage') {
if (curPage !== self.opts.totalPages) {
self.opts.currentPage += 1;
}
} else if (cls === 'xl-jumpButton') {
self.opts.currentPage = Number($('#xlJumpNum').val());
} else {
self.opts.currentPage = pageNum;
}
self.render();
if (self.opts.onPageChange) {
self.opts.onPageChange(self.opts.currentPage);
}
});
},
updateState: function () {
var self = this;
var curPage = self.opts.currentPage;
var totPages = self.opts.totalPages;
if (curPage === 1) {
self.el.children().children('.xl-prevPage').addClass('xl-disabled');
} else if (curPage === totPages) {
self.el.children().children('.xl-nextPage').addClass('xl-disabled');
}
}
}
$.fn.paginate = function (opts) {
return new Paginator($(this), opts);
}
})(jQuery, window, document);
After injecting the modified JavaScript, clicknig on the second page will display all page buttons.
