排序基於其頭單元格的表格被點擊

Question

如果我有以下幾點：

<table> 
<thead> 
<tr> 
<th><a href="Index.cfm?Sort=0">First</a></th> 
<th><a href="Index.cfm?Sort=1">Second</a></th> 
<th><a href="Index.cfm?Sort=2">Third</a></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>A</td> 
<td class="num">123</td> 
<td><input name="XYZ"></td> 
</tr> 
</tbody> 
</table> 

問：我怎麼排序基於點擊了哪個表頭單元格的表格體？

<script> 
$('th a').click(function() { 
    var $this = $(this).closest('th'); 
    console.log($this.index()); 
    return false; 
}); 
</script> 

（I製成各表頭單元的超鏈接，使得如果用戶已經關閉JavaScript，它將按照鏈接和在服務器端進行排序）。

Answer 1

function OrderBy(a,b,n) { 
    if (n) return a-b; 
    if (a < b) return -1; 
    if (a > b) return 1; 
    return 0; 
} 
$('th a').click(function() { 
    var $th = $(this).closest('th'); 
    $th.toggleClass('selected'); 
    var isSelected = $th.hasClass('selected'); 
    var isInput= $th.hasClass('input'); 
    var column = $th.index(); 
    var $table = $th.closest('table'); 
    var isNum= $table.find('tbody > tr').children('td').eq(column).hasClass('num'); 
    var rows = $table.find('tbody > tr').get(); 
    rows.sort(function(rowA,rowB) { 
     if (isInput) { 
      var keyA = $(rowA).children('td').eq(column).children('input').val().toUpperCase(); 
      var keyB = $(rowB).children('td').eq(column).children('input').val().toUpperCase(); 
     } else { 
      var keyA = $(rowA).children('td').eq(column).text().toUpperCase(); 
      var keyB = $(rowB).children('td').eq(column).text().toUpperCase(); 
     } 
     if (isSelected) return OrderBy(keyA,keyB,isNum); 
     return OrderBy(keyB,keyA,isNum); 
    }); 
    $.each(rows, function(index,row) { 
     $table.children('tbody').append(row); 
    }); 
    return false; 
}); 

Answer 2

你可能感興趣jQuery Plugin: Tablesorter或任何any other table sort plugin。

Answer 3

這並不像聽起來那麼簡單。

首先，您需要決定是否僅對字母數字或日期，數字等進行排序。然後，您需要遍歷每個單元格中的數據，將其添加到數組中，對數組進行排序，將tr從表，並按正確的順序重新添加它們。

碰巧，有一個很好的插件，它會爲你：

http://tablesorter.com/docs/

Answer 4

function Ascending(a,b) { 
    if (a < b) return -1; 
    if (a > b) return 1; 
    return 0; 
} 
$('th a').click(function() { 
    var $th = $(this).closest('th'); 
    var column = $th.index(); // Todo: url.Sort 
    var $table = $th.closest('table'); 
    var rows = $table.find('tbody > tr').get(); 
    rows.sort(function(rowA,rowB) { 
     if (column == 2) { 
      var keyA = $(rowA).children('td').eq(column).children('input').val().toUpperCase(); 
      var keyB = $(rowB).children('td').eq(column).children('input').val().toUpperCase(); 
     } else { 
      var keyA = $(rowA).children('td').eq(column).text().toUpperCase(); 
      var keyB = $(rowB).children('td').eq(column).text().toUpperCase(); 
     } 
     return Ascending(keyA,keyB); 
    }); 
    $.each(rows, function(index,row) { 
     $table.children('tbody').append(row); 
    }); 
    return false; 
}); 

Answer 5

另一個jQuery插件：http://datatables.net/

我認爲它應該是與JQuery UI兼容。

編輯：
支持自定義排序功能。
http://datatables.net/plug-ins/sorting

Answer 6

/** 
* This tidy function can sort your rows belonging to TBODY via an ID in your table 
* The only thing it does is to sort a specific column in a ascending byte mode 
* M.Rasch may 2010 xmlsoap.dk 
*/ 
function sortColumn (id, colNo) { 
    var zTemp = []; 
    var rows = document.getElementById(id).getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 

    for(ix=0;ix<rows.length;ix++){ 
    var column = rows[ix].getElementsByTagName('td')[colNo - 1]; // relative column offSet, one-based 
    zTemp[ix] = [];            // prepare 2nd dimension 
    zTemp[ix][0] = column.innerHTML;        // the "value" to sort ... 
    zTemp[ix][1] = rows[ix];          // and here goes complete row 
    } 
    zTemp.sort(function (elmA, elmB){ 
        if (elmA[0] === elmB[0]) return 0; 
        return (elmA[0] < elmB[0]) ? -1 : 1; 
        } 
); 
    for(ix=0;ix<rows.length;ix++){         // Remove row collection entirely 
    var temp = rows[ix].parentNode; 
    temp.removeChild(rows[ix]); 
    } 
    var tBody = document.getElementById(id).getElementsByTagName('tbody')[0]; 
    for(ix=0;ix<zTemp.length;ix++){         // and re-insert them ... 
    tBody.appendChild(zTemp[ix][1]); 
    } 
}