Question

簡易分頁插件在列表下有默認的底部欄。 我試圖在頂部添加額外的導航欄。它顯示。但它不工作分頁。

這裏是原碼。

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>'; 
     } 

     for(i = 1;i <= plugin.settings.pages;i++) { 
      htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</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.before(plugin.nav); 
     plugin.el.after(plugin.nav); 

     var elSelector = '#' + plugin.el.get(0).id + ' + '; 
     $(elSelector + ' .easyPaginateNav a.page,' 
      + elSelector + ' .easyPaginateNav a.first,' 
      + elSelector + ' .easyPaginateNav a.last').on('click', function(e) { 
      e.preventDefault(); 
      displayPage($(this).attr('rel'));     
     }); 

     $(elSelector + ' .easyPaginateNav a.prev').on('click', function(e) { 
      e.preventDefault(); 
      page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1; 
      displayPage(page); 
     }); 

     $(elSelector + ' .easyPaginateNav 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); 
     }); 
    }; 

我試圖把plugin.nav。之前和。經過plugin.el在同一時間，但上面不顯示和工作，但BUTTOM人做。

這裏的jsfiddle鏈接 - https://jsfiddle.net/ezq9zf1j/

Answer 1

使用克隆來克隆導航和它前面加上父元素

$('#easyPaginate').easyPaginate({ 
    paginateElement: 'img', 
    elementsPerPage: 3, 
    effect: 'climb' 
}); 
var nav = $('.easyPaginateNav').clone(true,true); 
nav.prependTo('body'); 

演示：http://jsfiddle.net/s41buqkc/