Pagination Customization

Use this script to fully customize the pagination for search and category pages

const NUMBER_OF_PRODUCTS = 60;

let isp_custom_paginator = {
vars:{
current_page: 0,
max_page: 0,
total_results: 0,
page_forward_text: '▶',
page_back_text: '◀',
},
create: function (container_selector,style_code) {
this.current_page = ISP_LAST_SEARCH["page_number"];
this.max_page = (ISP_LAST_SEARCH["total_results"] / NUMBER_OF_PRODUCTS).toFixed(0);
this.total_results = ISP_LAST_SEARCH["total_results"];

let paginator_html = '';
if(style_code === "tab_top"){
if(this.max_page < this.current_page) {
this.max_page = 1;
}
paginator_html += '<span class="isp_custom_paginator top">';
let show_left_arrow = this.current_page > 1 ? 'style="display:block"' : 'style="display:none"';
paginator_html += '<button class="page_nav back" onclick="isp_custom_paginator.goToPrevPage(event)"'+show_left_arrow+'>' + this.vars.page_back_text + '</button>';
paginator_html += '<span class="page_nav middle">Page ' + this.current_page + ' Of ' + this.max_page + '</span>';
let show_right_arrow = this.current_page < this.max_page ? 'style="display:block"' : 'style="display:none"';
paginator_html += '<button class="page_nav forward" onclick="isp_custom_paginator.goToNextPage(event)"'+show_right_arrow+'>' + this.vars.page_forward_text + '</button></span>'
} else if (style_code === "bottom_page"){
if(this.max_page < this.current_page) {
this.max_page = 1;
}
paginator_html += '<div class="isp_pagination bottom"><span class="isp_custom_paginator bottom">';
let show_left_arrow = this.current_page > 1 ? 'style="display:block"' : 'style="display:none"';
paginator_html += '<button class="page_nav back" onclick="isp_custom_paginator.goToPrevPage(event)"'+show_left_arrow+'>' + this.vars.page_back_text + '</button>';
paginator_html += '<span class="page_nav middle">Page ' + this.current_page + ' Of ' + this.max_page + '</span>';
let show_right_arrow = this.current_page < this.max_page ? 'style="display:block"' : 'style="display:none"';
paginator_html += '<button class="page_nav forward" onclick="isp_custom_paginator.goToNextPage(event)"'+show_right_arrow+'>' + this.vars.page_forward_text + '</button></span>';
paginator_html += '<span class="results_count">Viewing ' + (1 + (this.current_page -1)*60) + " - "+Math.min(this.current_page * 60,this.total_results)+" Styles Of " + this.total_results + '</span></div>';
}
switch (container_selector[1]) {
case "after":
$(container_selector[0]).after(paginator_html);
break;
case "before":
$(container_selector[0]).before(paginator_html);
break;
case "append":
$(container_selector[0]).append(paginator_html);
break;
case "prepend":
$(container_selector[0]).prepend(paginator_html);
}
},

goToNextPage: function (event) {
try {
go_to_page(++this.current_page);
}catch (e) {
window.location.reload();
console.log(e)
}
this.updatePaginator();
},

goToPrevPage:function (event) {
try {
go_to_page(--this.current_page);
} catch (e) {
window.location.reload();
console.log(e)
}
this.updatePaginator();
},

updatePaginator: function () {
this.current_page = ISP_LAST_SEARCH["page_number"];
this.max_page = (ISP_LAST_SEARCH["total_results"] / NUMBER_OF_PRODUCTS).toFixed(0);
this.total_results = ISP_LAST_SEARCH["total_results"];

if(this.max_page < this.current_page) {
this.max_page = 1;
}

if(this.current_page > 1){
$('.page_nav.back').show();
} else {
$('.page_nav.back').hide();
}

if( this.current_page < this.max_page){
$('.page_nav.forward').show();
} else {
$('.page_nav.forward').hide();
}

$(".page_nav.middle").text('Page ' + this.current_page + ' Of ' + this.max_page);
$('.results_count').text('Viewing' + (1 + (this.current_page -1)*60) + " - "+Math.min(this.current_page * 60,this.total_results)+" Styles Of " + this.total_results);
}
};