爲多個<tbody>元素分頁？

讓我們說我有一個這樣的表：爲多個<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插件，或者我應該寫我自己的？有什麼建議麼？

來源

2013-03-04 Legend

使用JavaScript與1000個元素在頁面上處理是_overkill_，爲什麼不能在服務器端做這個？ – undefined 2013-03-04 19:49:49

我不知道該結構的具體分頁標籤。親自編寫它不應該太難。數學很容易，jQuery使選擇/顯示/隱藏瑣碎。約3小時的工作經過充分測試。 – 2013-03-04 19:51:05

http://datatables.net有分頁選項。 – Blazemonger 2013-03-04 19:52:16

傳說，

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

來源

2013-03-04 23:43:27

+1謝謝你的時間。出於某種原因，我無法訪問鏈接？另外，在我的方法中，我不是一次構建整個HTML，而是取決於正在查看的頁面視圖。另外，我同意你的評論。其缺乏遠見 - 我應該在服務器端實施分頁。經驗教訓:) – Legend 2013-03-05 00:02:35

圖例是，您的頁面將通過以JavaScript形式提供的數據而不是完全形成的HTML來縮小。 FWIW，我糾正了小提琴的鏈接。 – 2013-03-05 00:17:14

最有效的方法是實現分頁服務器端。

正如在評論中所說，Datatables似乎是你走的最佳方式。我也可能會考慮SlickGrid

請注意，你有選擇的客戶端或服務器端分頁使用這些API

來源

2013-03-04 20:08:03 Jako

謝謝。我唯一擔心的是，這些似乎對於常規表格（一個帶有多個「tr」標籤的'tbody'標籤）來說是非常有用的。然而，在我的使用案例中，我有一個自定義佈局，而且我不瞭解如何針對我的使用情況調整這些插件。你有什麼建議嗎？ – Legend 2013-03-04 20:10:24

本頁似乎回答您的問題：[http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html](http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html ）。您可以重寫fnDrawCallback來爲每個組創建一個新的tbody標記。 – Jako 2013-03-04 20:28:46

我得到這個通過輕量工作插件叫做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); 
});

來源

2013-03-04 20:47:24 Legend

爲多個<tbody>元素分頁？

回答

相關問題