Gruppieren von Zeilen mit clientseitigem HTML-Tabellensortieren

Question

Gibt es vorhandene Bibliotheken für die Tabellensortierung oder gibt es eine Möglichkeit, tablesorter so zu konfigurieren, dass alle zwei Zeilen sortiert werden? Alternativ gibt es eine bessere Möglichkeit, meine Tabelle so auszudrücken, dass die standardmäßige Zeilensortierung funktioniert.

Ich habe eine HTML-Tabelle, die so etwas wie diese

<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> 

nach einem Weg, ich bin auf der Suche auf den Tisch, so dass die Tabelle zu sortieren sieht durch die Datenzeilen sortiert, aber die Zeile mit der colspan reist mit seinen Daten und wird nicht getrennt sortiert.

Answer 1

Jemand develo ped diese Funktionalität für Tablesorter. Schauen Sie sich diese Seite:

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

Alles, was Sie tun müssen, ist geben sekundären Reihen eine Klasse von „expand-Kind“ (dies ist konfigurierbar).

Genau das, was Sie brauchen.

Answer 2

Das einzige für Sie verfügbare Element zur logischen (nicht unbedingt semantischen) Gruppierung der zugehörigen Zeilen ist <tbody>, da mehrere <tbody> Elemente gleichzeitig gültig sind. Dies wird Ihnen jedoch in diesem Fall aufgrund der Art der Implementierung von tabletorter nicht helfen.

Ich sehe eine undokumentierte Konfigurationsoption in dem Sourcecode des Tabellensortierers - - die es ermöglicht, eine Funktion anzugeben, die die zu sortierende Tabelle und eine Datenstruktur mit den sortierten Zeilen aufnimmt, um die gewünschte Neuordnung zu erreichen , aber ich kann keine Optionen sehen, mit denen Sie konfigurieren können, welche Zeilen beim Sortieren angezeigt werden. Wenn dieser erste Teil des Puzzles vorhanden war, könnten Sie damit Zeilen, die für die Sortierung berücksichtigt werden, auf Ihre echten Datenzeilen beschränken und die Option verwenden, um eine Funktion anzuhängen, die jede sortierte Zeile und ihre nächste Zeile anfügt.

Edit: Hier ist eine schnelle und böse Implementierung des Extrastückes Sie und ein Verwendungsbeispiel bräuchten:

Modifikation der buildCache Methode, von der Linie 195 weiter nach 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: []}; 

Verwendung, die für mich mit Ihrem Probentisch funktioniert:

$(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(); 
});