Phân nhóm hàng với bảng phân đoạn HTML phía máy khách

Question

Có thư viện sắp xếp bảng hiện có nào không, hoặc có cách nào để định cấu hình tablesorter, để sắp xếp hai hàng không? Cách khác, có cách nào tốt hơn để semantially thể hiện bảng của tôi để phân loại hàng tiêu chuẩn sẽ làm việc.

Tôi có một bảng html mà trông giống như sau

<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Some Data: 1</td> 
      <td>Some More Data:1 </td> 
     </tr> 
     <tr> 
      <td colspan="2">Some text about the above data that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td> 
     </tr> 

     <tr> 
      <td>Some Data: 2</td> 
      <td>Some More Data: 2</td> 
     </tr> 
     <tr> 
      <td colspan="2">Some text about the above data 2 set that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td> 
     </tr>   

    </tbody> 
</table> 

Tôi đang tìm kiếm một cách để sắp xếp bảng như vậy mà bảng được sắp xếp theo các hàng dữ liệu, nhưng hàng với colspan di chuyển với dữ liệu của nó và không được sắp xếp riêng biệt.

Answer 1

người develo sử dụng chức năng này cho bảng phân đoạn. Kiểm tra trang này:

http://blog.pengoworks.com/index.cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Rows

Tất cả bạn cần làm là cung cấp cho hàng thứ cấp một lớp "mở rộng con" (đây là cấu hình).

Thực hiện chính xác những gì bạn cần.

Answer 2

Phần tử duy nhất có sẵn cho bạn một cách hợp lý (không nhất thiết ngữ nghĩa) nhóm các hàng có liên quan lại với nhau là <tbody>, vì nó hợp lệ để có nhiều thành phần <tbody>. Tuy nhiên, điều đó sẽ không giúp ích gì cho bạn trong trường hợp này do cách thức thực hiện bảng biểu.

Tôi có thể thấy tùy chọn cấu hình không có giấy tờ trong mã nguồn của bảng - appender - cho phép bạn chỉ định một hàm sẽ sắp xếp bảng và cấu trúc dữ liệu chứa các hàng được sắp xếp để nối vào nó để đạt được sắp xếp mong muốn , nhưng tôi không thể thấy bất kỳ tùy chọn nào cho phép bạn định cấu hình các hàng mà nó sẽ xem khi nó thực hiện sắp xếp. Nếu có phần đầu tiên của câu đố ở đó, bạn có thể sử dụng nó để hạn chế các hàng được xem xét để sắp xếp các hàng dữ liệu thực của bạn và sử dụng tùy chọn appender để cung cấp chức năng nối thêm mỗi hàng được sắp xếp và anh chị em hàng kế tiếp của nó.

Edit: Dưới đây là một thực hiện nhanh chóng và khó chịu của mảnh thêm bạn cần và một ví dụ sử dụng:

Modification với phương pháp buildCache, từ dòng 195 trở đi để jquery.tablesorter.js:

var rowsToSort = table.config.rowsToSort ? table.config.rowsToSort(table) : table.tBodies[0].rows; 
var totalRows = rowsToSort.length, 
    totalCells = (rowsToSort[0] && rowsToSort[0].cells.length) || 0, 
    parsers = table.config.parsers, 
    cache = {row: [], normalized: []}; 

Cách sử dụng mà làm việc cho tôi với bảng mẫu của bạn:

$(document).ready(function() { 
    $.tablesorter.defaults.debug = true; 

    // Select every other row as sorting criteria 
    $.tablesorter.defaults.rowsToSort = function(table) 
    { 
     var rows = []; 
     var allRows = table.tBodies[0].rows; 
     for (var i = 0, l = allRows.length; i < l; i += 2) 
     { 
     rows.push(allRows[i]); 
     } 
     return rows; 
    }; 

    // Append each row and its next sibling row 
    $.tablesorter.defaults.appender = function (table, rows) 
    { 
     for (var i = 0, l = rows.length; i < l; i++) 
     { 
     var row = rows[i][0]; 
     var buddyRow = $(row).next("tr").get(0); 
     table.tBodies[0].appendChild(row); 
     table.tBodies[0].appendChild(buddyRow); 
     } 
    }; 

    $("table").tablesorter(); 
});