为多个元素分页？

Question

让我们说我有一个这样的表：为多个<tbody>元素分页？

<table> 
    <thead> 
     <tr><th>Customer</th><th>Order</th><th>Month</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Customer 1</td><td>#1</td><td>January</td></tr> 
     <tr><td>Customer 1</td><td>#2</td><td>April</td></tr> 
     <tr><td>Customer 1</td><td>#3</td><td>March</td></tr> 
    </tbody> 
    <tbody> 
     <tr><td>Customer 2</td><td>#1</td><td>January</td></tr> 
     <tr><td>Customer 2</td><td>#2</td><td>April</td></tr> 
     <tr><td>Customer 2</td><td>#3</td><td>March</td></tr> 
    </tbody> 
    <tbody> 
     <tr><td>Customer 3</td><td>#1</td><td>January</td></tr> 
     <tr><td>Customer 3</td><td>#2</td><td>April</td></tr> 
     <tr><td>Customer 3</td><td>#3</td><td>March</td></tr> 
    </tbody> 
    .... 
    .... 1000s of records like this 
</table> 

有没有一种方法可以让我PAGINATE基于tbody元素？例如，我想显示第1页上的前50条记录等等。有没有这样做的jQuery插件，或者我应该写我自己的？有什么建议么？

Answer 1

传说，

jQuery Pagination Plugin - - 尼斯找到。

这里有一种方法可以使用这个插件来更加接近你最初的要求。

$(document).ready(function() { 
    var $tbodies = $("#myTable tbody"); 

    // Create pagination element with options from form 
    var paginationOpts = { 
     callback: pageselectCallback, 
     items_per_page: 5, 
     num_display_entries: 10, 
     num_edge_entries: 2, 
     prev_text: "Prev", 
     next_text: "Next" 
    }; 

    function pageselectCallback(page_index, jq) { 
     //calculate limits of the page in terms of tbody indices 
     var limits = { 
      start: page_index * paginationOpts.items_per_page, 
      end: (page_index + 1) * paginationOpts.items_per_page 
     }; 
     $tbodies.filter(":visible").hide(); 
     $tbodies.slice(limits.start, limits.end).show(); 
     // Prevent click eventpropagation 
     return false; 
    } 

    $("#Pagination").pagination($tbodies.length, paginationOpts); 
}); 

我不是说这样比较好。对于1000多个tbody，HTML可能非常庞大，页面转换可能非常缓慢，但如果您尚未修改数据的传输方式，这种方法可以为您节省开发时间。

将来可能对某人有用。

Demo

Answer 2

最有效的方法是实现分页服务器端。

正如在评论中所说，Datatables似乎是你走的最佳方式。 我也可能会考虑SlickGrid

请注意，你有选择的客户端或服务器端分页使用这些API

Answer 3

我得到这个通过轻量工作插件叫做jQuery Pagination Plugin。

这里是一个demo如果任何人有兴趣。

HTML：

<div id="Pagination" class="pagination"></div> 
<br style="clear:both" /> 
<table id="Searchresult"></table> 

JS：

var members = [ 
    // Any data array 
]; 

var n = ""; 
function pageselectCallback(page_index, jq) { 
    // Get number of elements per pagionation page from form 
    var items_per_page = 5; 
    var max_elem = Math.min((page_index + 1) * items_per_page, members.length); 
    var newcontent = ''; 

    // Iterate through a selection of the content and build an HTML string 
    newcontent = "<table>"; 
    for (var i = page_index * items_per_page; i < max_elem; i++) { 
     newcontent += '<tbody><tr><td>' + members[i][0] + '</td></tr>'; 
     newcontent += '<tr><td class="state">' + members[i][2] + '</td>'; 
     newcontent += '<td class="party">' + members[i][3] + '</td></tr></tbody>'; 
    } 
    newcontent += "</table>"; 

    // Replace old content with new content 
    $('#Searchresult').html(newcontent); 

    // Prevent click eventpropagation 
    return false; 
} 

$(document).ready(function() { 
    // Create pagination element with options from form 
    var opt = { 
     callback: pageselectCallback 
    }; 
    opt.items_per_page = 5; 
    opt.num_display_entries = 10; 
    opt.num_edge_entries = 2; 
    opt.prev_text = "Prev"; 
    opt.next_text = "Next"; 

    $("#Pagination").pagination(members.length, opt); 
});