Sortieren Spalte Tabelle anstelle von Zeile

Question

Ich habe eine Tabelle, wo meine Header in der ersten Spalte sind. Ich suche eine Methode, um meine Tabelle nach dieser Spalte zu sortieren. Ich kenne Datatable und Tablesorter, aber ich finde keine Lösung damit meinen Tisch so zu sortieren.

Um klar zu sein, hier ist ein Beispiel für meine Tabelle:

Name | John | Jane | Toto 
Value| 1256 | 125 | 8563 
Val2 | 12 | 45 | 3 

(hier ein Anfang Code auf JSFiddle: https://jsfiddle.net/nLwo8bya/1/)

Und ich möchte auf einer Zelle in der ersten Spalte klicken um andere Spalten nach dieser Zeile zu sortieren.

Wenn ich auf den Namen klicken, wird die vorherige Tabelle sein:

Name | Jane | John | Toto 
Value| 125 | 1256 | 8563 
Val2 | 45 | 12 | 3 

Die Spalte der Tabelle sind nun sortiert nach Namen (die erste Zeile in diesem Fall).

Vielen Dank im Voraus für Ihre Hilfe

Edit: Wie Nnnnnn sagt, ich will Spalten sortieren, die von der ersten

Answer 1

Der erste Weg, der in den Sinn kam, war die Tabelle neu zu strukturieren, so dass Sie am Ende mit eine Zeile mit einem td pro Spalte; Jedes dieser Spalten tds würde eine geschachtelte Tabelle mit den Daten für diese Spalte enthalten. Auf diese Weise ist der eigentliche Sortierprozess sehr einfach, da Sie nur die Top-Level-Tds sortieren müssen.

Der komplizierte Teil ist die Umstrukturierung. Das folgende ist nur der erste hässliche Code, den ich geschrieben habe, um das zu ermöglichen. Dies kann wahrscheinlich ziemlich viel aufgeräumt und optimiert werden, oder vollständig auf eine intelligentere Weise neu geschrieben, aber ich lasse das als eine Übung für den Leser ...

$(document).ready(function(){ 
 
    var trs = $("table tr"); 
 
    var tds = trs.find("td"); 
 
    var columnCount = trs.first().children().length; 
 
    var columns = []; 
 
    var sortableTR = $("<tr></tr>"); 
 
    for (var i = 0; i < columnCount; i++) 
 
    columns.push([]); 
 

 
    tds.each(function(i,td) { 
 
    columns[i%columnCount].push($("<tr></tr>").append(td)); 
 
    }); 
 
    columns.forEach(function(v) { 
 
    sortableTR.append($("<td></td>").append($("<table></table>").append(v))); 
 
    }); 
 
    trs.remove("tr"); 
 
    $("table").append(sortableTR); 
 
    sortableTR.children().first().on("click", "tr", function(e) { 
 
    var row = $(this); 
 
    var rowIndex = row.index(); 
 
    var dataType = row.find("td").attr("data-type"); 
 
    var cols = sortableTR.children().slice(1); 
 
    cols.sort(function(a, b) { 
 
     a = $(a).find("td").eq(rowIndex).text(); 
 
     b = $(b).find("td").eq(rowIndex).text(); 
 
     if (dataType==="number") { 
 
     a = +a; 
 
     b = +b; 
 
     } 
 
     return a > b ? 1 : a < b ? -1 : 0; 
 
    }); 
 
    cols.each(function() { sortableTR.append(this); }); 
 
    }); 
 
});

table, tr, td { border: none; border-collapse: collapse; } 
 
td { width: 100px; padding: 0px; margin: 0px; } 
 
td td { border: thin grey solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr> 
 
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr> 
 
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr> 
 
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr> 
 
</table>

Bitte beachte, dass ich hinzugefügt Ein data-type Attribut zu den Überschriftenzellen, so dass die Sortierung weiß, ob die Daten als numerisch behandelt werden sollen oder nicht.

die Stile auf der resultierende Tabelle Fixing ist eine andere Sache, die ich für den Leser als Übung verlassen ...

Answer 2

Spalten sortieren

// create headings array to sort 
var headings = $('#sortedTable tr:first td:gt(0)').map(function(item){  
     return $(this).text() 
    }).get(); 
    // copy and sort new array 
    var sortedHeadings = headings.slice().sort(); 
    // create object where old index is key, value is new index 
    var indices = headings.reduce(function(a,c,i){ 
    a[i]= sortedHeadings.indexOf(c); 
    return a; 
    },{}); 
    // iterate rows and sort cells 
    $('#sortedTable tr') .each(function(i){ 
    // sort using index hash object above 
    var $cells = $(this).children(':gt(0)').sort(function(a,b){ 
     return indices[$(a).index()]-indices[$(b).index()] 
    }); 
    // append sorted cells 
    $(this).append($cells) 
    }); 

DEMO