Сортировка таблицы, на основании которого заголовок ячейки была нажата

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> 

Q: Как сортировать тело таблицы, основываясь на котором заголовок ячейки таблицы была нажата?

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

(я сделал каждый из ячеек заголовка таблицы гиперссылок, так что если пользователь 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]); 
    } 
}