jquery.easyPaginate.js all page numbers in pagination -
click here image in above images pagination taking avaliable number of pages
i want limit pagination 10number ,when u click last 1 1st 10 has hide , next 10 has 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 = '<div class="easypaginatenav">'; if (plugin.settings.firstbutton) { htmlnav += '<a href="#' + plugin.settings.hashpage + ':1" title="first page" rel="1" class="first">' + plugin.settings.firstbuttontext + '</a>'; } if (plugin.settings.prevbutton) { htmlnav += '<a href="" title="previous" rel="" class="prev">' + plugin.settings.prevbuttontext + '</a>'; } (i = 1; <= plugin.settings.pages; i++) { htmlnav += '<a href="#' + plugin.settings.hashpage + ':' + + '" title="page ' + + '" rel="' + + '" class="page">' + + '</a>'; }; if (plugin.settings.nextbutton) { htmlnav += '<a href="" title="next" rel="" class="next">' + plugin.settings.nextbuttontext + '</a>'; } if (plugin.settings.lastbutton) { htmlnav += '<a href="#' + plugin.settings.hashpage + ':' + plugin.settings.pages + '" title="last page" rel="' + plugin.settings.pages + '" class="last">' + plugin.settings.lastbuttontext + '</a>'; } htmlnav += '</div>'; 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(); }); }, * 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 }); }, * 200); }); }; plugin.currentelements = $([]); plugin.settings.pages = getnbofpages(); if (plugin.settings.pages > 1) { plugin.el.html(); // here 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'); } }); };
i ran same problem.
unfortunately, seems specific jquery pagination plugin doesn't have such option.
my recommendation use plugin handle pagination stuff. know! it's heartbreaking because of how awesome , simple use plugin is, c'est la vie!
give me bit , i'm going research better way done.
Comments
Post a Comment