如何按日期列对表格进行排序

Question

我有一张表，我想对日期列进行升序和降序排序。

我已经尝试了下面的代码，但它不起作用。它仅在对数字进行排序时起作用。

function sortColumn() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("example");
        switching = true;
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[6];
                y = rows[i + 1].getElementsByTagName("TD")[6];
                if (parseInt(x.innerHTML.toLowerCase()) > parseInt(y.innerHTML.toLowerCase())) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }

Answer 1

这是一个比您一直在寻找的更复杂的示例。它利用了数组排序功能，可以利用可选的compareFunction来进行排序比较。

$(function() {
  function tableToArray(tObj) {
    var result = [];
    var keys = [];
    $("thead th", tObj).each(function(i, el) {
      keys.push($(el).text().trim());
    });
    $("tbody tr").each(function(i, row) {
      var temp = {};
      $.each(keys, function(j, k) {
        temp[k] = $("td", row).eq(j).text().trim();
      });
      result.push(temp);
    });
    return result;
  }

  function replaceTableData(tObj, data) {
    var b = $("tbody", tObj);
    b.html("");
    $.each(data, function(i, row) {
      var r = $("<tr>").appendTo(b);
      $.each(row, function(j, cell) {
        $("<td>").html(cell).appendTo(r);
      });
    });
  }

  function compare(a, b) {
    var dateA = a.Date;
    var dateB = b.Date;
    var result = 0;
    if (dateA > dateB) {
      result = 1;
    } else {
      result = -1;
    }
    return result;
  }

  function sortTable() {
    var tData = tableToArray($("table"));
    tData.sort(compare);
    replaceTableData($("table"), tData);
  }

  $(".sort-column").click(sortTable);

});

.sort-column {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th class="sort-column" data-sort-order="null">Date</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>17/12/1989</td>
      <td>Homer</td>
    </tr>
    <tr>
      <td>2</td>
      <td>07/09/2019</td>
      <td>Marge</td>
    </tr>
    <tr>
      <td>3</td>
      <td>01/09/2019</td>
      <td>Bart</td>
    </tr>
    <tr>
      <td>4</td>
      <td>04/09/2019</td>
      <td>Lisa</td>
    </tr>
    <tr>
      <td>5</td>
      <td>14/09/2019</td>
      <td>Maggie</td>
    </tr>
  </tbody>
</table>

这将根据日期列中的文本进行排序。比较时，您可能会变得更复杂并将日期解析为日期对象。但是对于这种日期格式，它并不是真正需要的。

更新

将代码移动到函数中，以便在 Click 事件中调用它。这是一个非常简单的示例，如果您需要更复杂的操作，请考虑它的工作原理或 DataTables。