Jquery排序表数据

Question

我在使用jquery对表中的tds进行排序时感到震惊.

我的演示小提琴

如何在我的项目中为任何具有id的表调用它？

var $sort = this;
var $table = $('#mytable');
var $rows = $('tbody > tr',$table);
$rows.sort(function(a, b) {
    var keyA = $('td:eq(0)',a).text();
    var keyB = $('td:eq(0)',b).text();
    if($($sort).hasClass('asc')) {
        return (keyA > keyB) ? 1 : 0;
    } else {
        return (keyA < keyB) ? 1 : 0;
    }
});

Answer 1

像这样的东西

function sortTable(table, order) {
    var asc   = order === 'asc',
        tbody = table.find('tbody');

    tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td:first', a).text().localeCompare($('td:first', b).text());
        } else {
            return $('td:first', b).text().localeCompare($('td:first', a).text());
        }
    }).appendTo(tbody);
}

可以在任何这样的表上调用

sortTable($('#mytable'),'asc');

小提琴

Answer 2

我认为你错过了最后的"重置"功能来排序表.desc代码不起作用,因为必须切换顺序.

码:

$('.sort').click(function (e) {
    var $sort = this;
    var $table = $('#mytable');
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if ($($sort).hasClass('asc')) {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
    e.preventDefault();
});

演示:http://jsfiddle.net/7wwvL/

UPDATE

更一般地,您的功能可以是:

function sortTable($table,order){
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if (order=='asc') {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
}

sortTable($('#mytable'),'asc')

演示:http://jsfiddle.net/d7Kbx/