試圖通過變量步驟使用easypagination.js

Question

我借用easyPaginate的代碼，並試圖添加下拉功能來調整每個頁面上顯示的項目數。我的下拉菜單在第1頁上工作。當我點擊第2頁（或任何其他子頁面）時，頁面上的項目數量急劇增加。

會拼命愛得到一些幫助。

(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); 

Answer 1

我發現了幾個小時的研究和使用螢火蟲。

(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 = parseInt(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.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);