使用jQuery对表进行排序

时间:2014-09-29 10:06:56

标签: jquery html sorting

我在这里找到并关注了一个示例,用于对表进行排序,但它不起作用。这是我的代码:

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

 function sortTable(header) {
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 createTableHeader(table, headers, alignment) {
if (headers.length > 0) {
    var thead = document.createElement('thead');
    table.appendChild(thead);
    var tr = document.createElement('tr');
    for (var i = 0; i <= headers.length - 1; i++) {
        var th = document.createElement('th');
        var text = document.createTextNode(headers[i]);
        th.appendChild(text);
        th.style.textAlign = alignment;
        th.setAttribute('onclick', sortTable)
        tr.appendChild(th);
    }
    thead.appendChild(tr);
}
}

根本没有任何事情发生,然而,当我看到细节时,我可以看到附加到TH元素的函数。任何想法?

我是否使用从AJAX调用收到的数据动态创建此表是否与此问题有关?

1 个答案:

答案 0 :(得分:0)

以下是我的工作:

 function createTableHeader(table, headers, alignment) {
if (headers.length > 0) {
    var thead = document.createElement('thead');
    table.appendChild(thead);
    var tr = document.createElement('tr');
    for (var i = 0; i <= headers.length - 1; i++) {
        var th = document.createElement('th');
        var text = document.createTextNode(headers[i]);
        th.appendChild(text);
        th.style.textAlign = alignment;
        th.style.cursor = 'pointer';
        th.setAttribute('title', "Sort by " + headers[i]);
        th.onclick = function () {
            var rows = $(table).find('tbody').find('tr').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]);
            }
        }
        tr.appendChild(th);
    }
    thead.appendChild(tr);
}
}