排序列表而不是行

Question

我有一個表格，我的標題在第一列。我搜索一個方法來按這個列對我的表進行排序。我知道datatable和tablesorter，但我沒有找到任何解決方案來排序我的表。

需要明確的是，這裏是我的表的例子：

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

（下面的代碼上的jsfiddle一個開始：https://jsfiddle.net/nLwo8bya/1/）

我想點擊一個單元格中的第一列按此行對其他列進行排序。

如果我點擊的名字，上表爲：

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

表的列現在是按名稱排序（在這種情況下，第一行）。

在此先感謝您的幫助

編輯：像NNNNNN說，我想列進行排序，由第一個

Answer 1

浮現在腦海的第一種方式是重組這樣，你最終表與一個行，每列一個td;這些列tds中的每一個都將包含一個嵌套表格以及該列的數據。這樣，實際的排序過程非常簡單，因爲您只需對頂層tds進行排序。

複雜的部分是重組。以下只是我爲了實現這一目標而寫的第一批醜陋的代碼。這大概可以收拾和優化頗多，或完全在一個更聰明的方式重寫，但我將它作爲一個練習留給讀者......

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

請注意，我說一個data-type屬性的標題單元格，以便排序知道是否將數據視爲數字或不。

固定在所得到的表的樣式是另一回事，我離開作爲練習讀者...

Answer 2

排序列

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