表分頁 - 李的不正確附加

Question

function pagination() {  
$('.paginated').each(function() { 
    var currentPage = 0; 
    var numPerPage = $("#instancesPerPage").val(); 
    var $table = $(this); 
    $table.bind('repaginate', function() { 
     $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
    }); 
    $table.trigger('repaginate'); 
    var numRows = $table.find('tbody tr').length; 
    var numPages = Math.ceil(numRows/numPerPage); 
    var $pager = $('<ul></ul>'); 

    for (var page = 0; page < numPages; page++) { 
    var pageUrl = '<a href="#">' + page + '</a>'; 
     $('<li></li>').html(pageUrl).on('click', { 
      newPage: page 
     }, function(event) { 
      currentPage = event.data['newPage']; 
      $table.trigger('repaginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
     }).appendTo($pager);  
    } 
    $pager.appendTo('#pager'); 
    $("ul li:first-child").addClass('active'); 
}); 
}; 

如果我的表有8行，我numPerPage.value是2以上功能將產生如下：選擇時

<div class="pagination-instances pagination-small pagination-right" id="pager"> 
    <ul></ul> 
    <ul> 
     <li class="active"><a href="#">0</a></li> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
    </ul> 
</div> 

在調用下列功能另一個numPerPage.value：

$('#instancesPerPage').on("change", function() { 
    pagination(); 
}); 

我的表頁面更改爲正確的numPerPage.value但李的不正確更新，成爲一個爛攤子。

<div class="pagination-instances pagination-small pagination-right" id="pager"> 
    <ul></ul> 
    <ul> 
     <li class="active"><a href="#">0</a></li> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
    </ul> 
    <ul> 
     <li class="active"><a href="#">0</a></li> 
     <li><a href="#">1</a></li> 
    </ul> 
    <ul> 
     <li class="active"><a href="#">0</a></li> 
     <li><a href="#">1</a></li> 
    </ul> 
</div> 

顯然這與我正在使用的appendTo有些關係，但我不知道如何糾正這種情況。我也不知道爲什麼有一個空的<ul></ul>。

Answer 1

多次調用分頁（）將無法正常工作，因爲您不是解除綁定事件，而是添加到<div id="pager">而不是替換內容。此外，如果您有多個分頁表格，他們都會嘗試將ul添加到相同的<div id="pager">。通過爲表中的尋呼機指定目標div，可以使用多個分頁表和多個尋呼機。

<select id="instancesPerPage"> 
    <option value="2">2</option> 
    <option value="5">5</option> 
    <option value="8">8</option> 
    <option value="100">100</option> 
    <option value="999999999">All</option> 
</select> Instances per page 

<table data-provide="pagination" data-pager="#pager"> 
    <tr><td>Row 1</td></tr> 
    <tr><td>Row 2</td></tr> 
    <tr><td>Row 3</td></tr> 
    <tr><td>Row 4</td></tr> 
    <tr><td>Row 5</td></tr> 
    <tr><td>Row 6</td></tr> 
    <tr><td>Row 7</td></tr> 
    <tr><td>Row 8</td></tr> 
</table> 

<div class="pagination pagination-small" id="pager"></div> 

<table data-provide="pagination" data-pager="#pager2"> 
    <tr><td>ABC 1</td></tr> 
    <tr><td>ABC 2</td></tr> 
    <tr><td>ABC 3</td></tr> 
    <tr><td>ABC 4</td></tr> 
    <tr><td>ABC 5</td></tr> 
    <tr><td>ABC 6</td></tr> 
    <tr><td>ABC 7</td></tr> 
    <tr><td>ABC 8</td></tr> 
</table> 

<div class="pagination pagination-small" id="pager2"></div> 
​ 

使用JS

function pagination() { 
$('table[data-provide=pagination]').each(function() { 
    var $table = $(this); 
    var $pager = $('<ul></ul>'); 

    var currentPage = 0; 
    var numPerPage = $("#instancesPerPage").val(); 
    var numRows = $table.find('tbody tr').length; 
    var numPages = Math.ceil(numRows/numPerPage); 

    $table.unbind('repaginate'); 

    $table.bind('repaginate', function() { 
     $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
    }); 

    for (var page = 0; page < numPages; page++) { 
     var link = '<a href="#">' + page + '</a>'; 

     $('<li></li>').html(link).on('click', { newPage: page}, function(event) { 
      currentPage = event.data['newPage']; 
      $table.trigger('repaginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
     }).appendTo($pager);  
    } 

    $pager.find("li:first-child").addClass('active'); 

    $($table.data('pager')).html($pager); 
    $table.trigger('repaginate'); 
}); 
}; 

pagination(); 

$('#instancesPerPage').on("change", function() { 
pagination(); 
}); 
​ 

http://jsfiddle.net/gZmWh/10/