Question

是否有一个jquery函数来对表进行排序。我知道JQuery Tablesorter插件，但我想尽可能避免使用它。

作为一个FYI - 我有一个表头，其中包含自定义图像以表示升序和降序。数据类型几乎可以是任何类型。

编辑：我可以在Javascript中对表进行排序吗？

Answer 1

这是非常可能的。你可以这样做

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};

看看这个Fiddle

（我不是上面代码的作者或那个小提琴，我只是在搜索解决方案时找到它。）

Answer 2

Javascript大师Stuart Langridge有一个很好的替代方法，使用名为tablesorter.js的jQuery

http://www.kryogenix.org/code/browser/sorttable/

我之前用过它;效果很好而且非常轻巧。

Answer 3

我不得不稍微更改排序功能，以便忽略非数字字符，希望这会节省一些时间......

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
    tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
    i;

    reverse = ((+reverse) || -1);

    tr = tr.sort(function (a, b) { // sort rows
        return reverse * (Number(a.cells[col].textContent.replace(/[^\d.-]/g, ''))
             - Number(b.cells[col].textContent.replace(/[^\d.-]/g, '')));
    });

    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

Answer 4

对于小桌子，我这样做......

sortTable = function(tableName, rowClass, columnNumber, ascending) {
    var row, cell, cellContent;
    var comparisonRow, comparisonCell, comparisonContent;

    $("#" + tableName + " tr." + rowClass).each(function(i) {
        row = $("#" + tableName + " tr." + rowClass + ":eq(" + i + ")");
        cell = $(row).find("td:eq(" + columnNumber + ")");
        cellContent = $(cell).html();

        $("#" + tableName + " tr." + rowClass).each(function(j) {
            comparisonRow = $("#" + tableName + " tr." + rowClass + ":eq(" + j + ")");
            comparisonCell = $(comparisonRow).find("td:eq(" + columnNumber + ")");
            comparisonContent = $(comparisonCell).html();

            if ( (ascending && cellContent < comparisonContent) || (!ascending && cellContent > comparisonContent) ) {
                $(row).insertBefore(comparisonRow);
                return false;
            }
        });
    });
};

说明：该函数遍历指定表的每一行（指定类），记录HTML内容（来自指定列的单元格），然后遍历所有表格的行比较单元格内容（再次来自指定的列）。当单元格内容更少或更大时（基于“升序”是否设置为真），将行插入到与其进行比较的行的前面。

示例通话将是......

sortTable("sample_table", "data_row", 0, true);

...它将根据第一列中的单元格（即列索引0）按升序对名为“sample table”的表中的类“data_row”进行排序。

对于较大的表格和其他功能，我使用...

DataTables

方便，我发现DataTables比TableSorter更容易使用（例如，除非你需要，不需要引用或合并额外的CSS和艺术品），并且文档非常好。我也喜欢默认功能（例如，它的搜索功能）。

Answer 5

https://www.w3schools.com/howto/howto_js_sort_table.asp

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the 
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }   
    }   
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }   
  }   
}

JQuery在没有插件的情况下对表进行排序

5 个答案: