使用Easy Paginate jQuery插件在同一頁面上創建多個分頁

Question

我正在使用this pagination plugin。

在他的解釋下，作者提到：

如果你想在同一個頁面上創建多個paginations，有 記住，這個插件使用的ID，所以你需要 目標控制按鈕爲每個分頁定義控件ID參數。

在我的網頁，我已經定義了兩個控件：

1. 
$('#port').easyPaginate({ 
    step:2 
}); 

2. 
$('#blog_posts').easyPaginate({ 
    step:1 
}); 

只有在第一個廣告id='port'工作。

有沒有人有任何想法，我怎麼能得到這個工作？

這裏是爲了方便您的腳本：

(function($) { 

    $.fn.easyPaginate = function(options){ 

     var defaults = {     
      step: 4, 
      delay: 100, 
      numeric: true, 
      nextprev: true, 
      auto:false, 
      pause:4000, 
      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').css({'display':'inline-block'}); }; 
        if(lower >= 1) { prev.fadeIn('fast').css({'display':'inline-block'}); } 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 ol; 
       var pages = Math.floor(count/step); 
       if((count/step) > pages) pages++; 

       ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); 

       if(options.nextprev){ 
        prev = $('<li class="prev">&laquo; Previous</li>') 
         .hide() 
         .appendTo(ol) 
         .click(function(){ 
          clicked = true; 
          page--; 
          show(); 
         }); 
       }; 

       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){ 
        next = $('<li class="next">Next &raquo;</li>') 
         .hide() 
         .appendTo(ol) 
         .click(function(){ 
          clicked = true;   
          page++; 
          show(); 
         }); 
       }; 

       show(); 
      }; 
     }); 

    }; 

})(jQuery); 

Answer 1

使用jQuery，創建過要分頁列表cylces的功能。用普通的類標記它們，以確保你沒有選擇頁面上的所有列表。

HTML

<div id="test_1" class="paginateMe"> 
    <ul> 
    </ul> 
    <div class="clear"></div> 
</div> 

<div id="test_2" class="paginateMe"> 
    <ul> 
    </ul> 
    <div class="clear"></div> 
</div> 

JS：

$('div.paginateMe').each(function(index, element) { 
    $this = $('#'+$(this).attr('id')+' ul'); 

    $this.easyPaginate({ step:1 }); 
}); 

你也可以只針對一個UL與普通類，而不是它嵌套在一個DIV像我上面那樣。

Answer 2

我解決了不同的方式

$('ul.easypagination1').easyPaginate({ 
     step:20, 
     delay:0, 
     controls:'easy-pagination-1' 
     }); 

    $('ul.easypagination2').easyPaginate({ 
     step:20, 
     delay:0, 
     controls:'easy-pagination-2' 
     }); 

它的工作原理，但你必須把更多的代碼和更多的CSS，我tryed opanitch的代碼，但它不適合我的作品，現在我對jQuery的1.7.2 ...不知道。