When viewing on a small screen device (> 641 px), my pagination should resemble https://i.sstatic.net/dSSUX.png
Conversely, on screens that are medium-sized and larger (< 641 px), the pagination should appear as shown here: https://i.sstatic.net/C1EXv.png
I am utilizing the 'paginga - jQuery Pagination Plugin v0.8.1' along with some custom jQuery code to achieve this functionality. However, I'm facing difficulty in producing the desired outcome. Can anyone provide assistance? The plugin code is displayed below.
(function ($, window, document, undefined)
{
"use strict";
var pluginName = "paginga",
defaults = {
itemsPerPage: 3,
... (other default settings omitted for brevity) ...
};
// Plugin constructor
function paginga(element, options)
{
... (constructor logic omitted for brevity) ...
}
$.extend(paginga.prototype,
{
init: function()
{
... (initialization logic omitted for brevity) ...
},
... (remaining methods omitted for brevity) ...
})(jQuery, window, document);
Below is the custom jQuery code written:
$(document).ready(function () {
var windowWidth = $(window).width();
if (windowWidth < 641) {
$(".paginate").paginga({
itemsPerPage: 2,
maxPageNumbers: 2,
page: 1
});
}
else {
$(".paginate").paginga({
itemsPerPage: 2,
maxPageNumbers: 6
});
}
$( window ).resize(function() {
if (windowWidth < 641) {
$(".paginate").paginga({
itemsPerPage: 2,
maxPageNumbers: 2
});
}
else {
$('.pager').load();
$(".paginate").paginga({
itemsPerPage: 6,
maxPageNumbers: 6
});
}
});
});