I'm borrowing easyPaginate's code and simply trying to add on a dropdown feature to adjust the number of items displaying on each page. My dropdown works on page 1. The moment I click on page 2(or any other child page), the amount of items on the page increases drastically.
Would desperately love to get some help.
(function($) {
$.fn.easyPaginate = function(options){
var defaults = {
step: 4,
delay: 0,
numeric: true,
nextprev: true,
auto:false,
pause:0,
user_list:false,
clickstop:true,
controls: 'pagination',
current: 'current'
};
var options = $.extend(defaults, options);
var step = options.step;
var lower, upper;
var children = $(this).children();
var count = children.length;
var obj, next, prev;
var page = 1;
var timeout;
var clicked = false;
function show(){
clearTimeout(timeout);
lower = ((page-1) * step);
upper = lower+step;
$(children).each(function(i){
var child = $(this);
child.hide();
if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
if(options.nextprev){
if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
};
});
$('li','#'+ options.controls).removeClass(options.current);
$('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
if(options.auto){
if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
};
};
function auto(){
if(upper <= count){ page++; show(); }
};
this.each(function(){
obj = this;
if(count>step){
var pages = Math.floor(count/step);
//counts the number of pages
if((count/step) > pages) pages++;
var ol = $('<ul id="'+ options.controls +'"></ul>');
$('#navigate').prepend(ol);
//Click on page numbers
if(options.numeric){
for(var i=1;i<=pages;i++){
$('<li data-index="'+ i +'">'+ i +'</li>')
.appendTo(ol)
.click(function(){
clicked = true;
page = $(this).attr('data-index');
show();
});
};
};
if(options.user_list){
$('<div style="float:right; margin-right:0;">Please select: <select name="amount" id="amount"><option value="5">5</option><option selected="10">10</option></select></div>')
.appendTo(ol)
.change(function(){
step=($("#amount").val());
show();
});
}
if(options.nextprev){
prev = $('<li class="prev">Previous</li>')
.hide()
.click(function(){
clicked = true;
page--;
show();
});
};
if(options.nextprev){
next = $('<li class="next">Next</li>')
.hide()
.click(function(){
clicked = true;
page++;
show();
});
};
show();
};
});
};
})(jQuery);