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>

（我制作了每个表格标题单元格的超链接，这样如果用户关闭了JavaScript，它将跟随链接并在服务器端排序。）

Answer 1

您可能对jQuery Plugin: Tablesorter或任何any other table sort plugin感兴趣。

Answer 2

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 3

/**
* 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]);
  }
 }

Answer 4

这并不像听起来那么直截了当。

首先，您需要决定是否只对字母数字或日期，数字等进行排序。然后，您需要遍历每个单元格中的数据，将其添加到数组中，对数组进行排序，从表中删除tr ，并按正确的顺序重新添加它们。

碰巧，有一个非常好的插件可以帮到你：

http://tablesorter.com/docs/

Answer 5

另一个JQuery插件：http://datatables.net/

我相信它应该与JQuery UI兼容。

编辑：
支持自定义排序功能 http://datatables.net/plug-ins/sorting

Answer 6

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

根据单击的标题单元格对表进行排序

6 个答案: