jquery.easyPaginate.js all page numbers in pagination
jquery.easyPaginate.js all page numbers in pagination
click here for image
in the above images pagination is taking all avaliable number of pages
I want to limit pagination 10number ,when u click last one then the 1st 10 has to hide and next 10 has to display
Iam using below code
$.fn.easyPaginate = function(options) {
var defaults = {
paginateElement: 'li',
hashPage: 'page',
elementsPerPage: 10,
effect: 'default',
slideOffset: 200,
firstButton: true,
firstButtonText: '<<',
lastButton: true,
lastButtonText: '>>',
prevButton: true,
prevButtonText: '<',
nextButton: true,
nextButtonText: '>'
}
return this.each(function(instance) {
var plugin = {
nav: null,
el: $(this),
settings: {
pages: 0,
objElements: null,
currentPage: 1,
visiblePages: 10
}
};
plugin.settings = $.extend({}, defaults, options);
plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
plugin.el.addClass('easyPaginateList');
var getNbOfPages = function() {
return Math.ceil(plugin.settings.objElements.length / plugin.settings.elementsPerPage);
};
var displayNav = function() {
htmlNav = '
if (plugin.settings.firstButton) {
htmlNav += '' + plugin.settings.firstButtonText + '';
}
if (plugin.settings.prevButton) {
htmlNav += '' + plugin.settings.prevButtonText + '';
}
for (i = 1; i ' + i + '';
};
if (plugin.settings.nextButton) {
htmlNav += '' + plugin.settings.nextButtonText + '';
}
if (plugin.settings.lastButton) {
htmlNav += '' + plugin.settings.lastButtonText + '';
}
htmlNav += '
plugin.nav = $(htmlNav);
plugin.nav.css({
'width': plugin.el.width()
});
plugin.el.after(plugin.nav);
plugin.nav.find('a.page, a.first, a.last').on('click', function(e) {
e.preventDefault();
displayPage($(this).attr('rel'));
});
plugin.nav.find('a.prev').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage > 1 ? parseInt(plugin.settings.currentPage) - 1 : 1;
displayPage(page);
});
plugin.nav.find('a.next').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage < plugin.settings.pages ? parseInt(plugin.settings.currentPage) + 1 : plugin.settings.pages;
displayPage(page);
});
};
var displayPage = function(page, forceEffect) {
if (plugin.settings.currentPage != page) {
plugin.settings.currentPage = parseInt(page);
offsetStart = (page - 1) * plugin.settings.elementsPerPage;
offsetEnd = page * plugin.settings.elementsPerPage;
if (typeof(forceEffect) != 'undefined') {
eval("transition_" + forceEffect + "(" + offsetStart + ", " + offsetEnd + ")");
} else {
eval("transition_" + plugin.settings.effect + "(" + offsetStart + ", " + offsetEnd + ")");
}
plugin.nav.find('.current').removeClass('current');
plugin.nav.find('a.page:eq(' + (page - 1) + ')').addClass('current');
switch (plugin.settings.currentPage) {
case 1:
plugin.nav.find('a').removeClass('disabled');
plugin.nav.find('a.first, a.prev').addClass('disabled');
break;
case plugin.settings.pages:
plugin.nav.find('a').removeClass('disabled');
plugin.nav.find('a.last, a.next').addClass('disabled');
break;
default:
plugin.nav.find('a').removeClass('disabled');
break;
}
}
};
var transition_default = function(offsetStart, offsetEnd) {
plugin.currentElements.hide();
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.el.html(plugin.currentElements);
plugin.currentElements.show();
};
var transition_fade = function(offsetStart, offsetEnd) {
plugin.currentElements.fadeOut();
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.el.html(plugin.currentElements);
plugin.currentElements.fadeIn();
};
var transition_slide = function(offsetStart, offsetEnd) {
plugin.currentElements.animate({
'margin-left': plugin.settings.slideOffset * -1,
'opacity': 0
}, function() {
$(this).remove();
});
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.currentElements.css({
'margin-left': plugin.settings.slideOffset,
'display': 'block',
'opacity': 0,
'min-width': plugin.el.width() / 2
});
plugin.el.html(plugin.currentElements);
plugin.currentElements.animate({
'margin-left': 0,
'opacity': 1
});
};
var transition_climb = function(offsetStart, offsetEnd) {
plugin.currentElements.each(function(i) {
var $objThis = $(this);
setTimeout(function() {
$objThis.animate({
'margin-left': plugin.settings.slideOffset * -1,
'opacity': 0
}, function() {
$(this).remove();
});
}, i * 200);
});
plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
plugin.currentElements.css({
'margin-left': plugin.settings.slideOffset,
'display': 'block',
'opacity': 0,
'min-width': plugin.el.width() / 2
});
plugin.el.html(plugin.currentElements);
plugin.currentElements.each(function(i) {
var $objThis = $(this);
setTimeout(function() {
$objThis.animate({
'margin-left': 0,
'opacity': 1
});
}, i * 200);
});
};
plugin.currentElements = $();
plugin.settings.pages = getNbOfPages();
if (plugin.settings.pages > 1) {
plugin.el.html();
// Here we go
displayNav();
page = 1;
if (document.location.hash.indexOf('#' + plugin.settings.hashPage + ':') != -1) {
page = parseInt(document.location.hash.replace('#' + plugin.settings.hashPage + ':', ''));
if (page.length <= 0 || page < 1 || page > plugin.settings.pages) {
page = 1;
}
}
displayPage(page, 'default');
}
});
};
generally there with be something to limit the pagination like visiblePages: 10
– naga venkata sudheer varma
Apr 7 '17 at 9:30
1 Answer
1
I ran into the same problem.
Unfortunately, it seems that this specific jquery pagination plugin doesn't have such an option.
My recommendation is that you use another plugin to handle your pagination stuff. I know! It's heartbreaking because of how awesome and simple to use this plugin is, but c'est la vie!
Give me a bit and I'm going to research a better way to get this done.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
What have you tried so far`? where do you run into problems?
– Carsten Løvbo Andersen
Apr 7 '17 at 9:25