jquery表对多行进行排序

时间:2014-06-03 07:24:44

标签: jquery jquery-ui sorting

不想在jquery中使用任何插件对表进行排序。

我有一个html表,就像这样

enter image description here

点击列名称后,它应按照这样的顺序排序。

enter image description here

在示例中,所有都只有表格行 - Accord,Dutch,Status,Department,Invoice。

荷兰语,软件,状态有班级名称 - 雅阁。

Inoive,Profit有班级名称 - 部门。

1 个答案:

答案 0 :(得分:0)

根据您的要求,这是DEMO。请检查。没有任何jQuery插件。

以下是主要功能的js代码:

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }