javascript - 使用 jquery 函数在 html 表中以 dd/mm/yyyy 格式排序日期

Question

我有一个 HTML 表，其中一列是日期值。如何在第一次单击时按降序对值进行排序，在单击列标题日期时在第二次单击时按升序对值进行排序

function getVal(elm, n) {
  var v = $(elm).find('td').eq(n).text().toUpperCase();
  var num = v.split(/ /)[0].replace(/[^\d]/g, '')
  num = parseFloat(num);
  if ($.isNumeric(num)) {
    v = parseInt(num, 10);
  }
  return v;
}

var f = 1;
$(".table-sortable .column-head").find('span,img').click(function(event) {
  event.preventDefault();
  table = $(this).closest('table');
  th = $(this).parent();
  $(th).find('span,img').toggleClass('rotate');

  f *= -1;
  var n = th.prevAll().length;
  console.log(n);
  var rows = table.find('tbody  tr').get();
  rows.sort(function(a, b) {
    var A = getVal(a, n);
    var B = getVal(b, n);
    if (A < B) {
      return -1 * f;
    }
    if (A > B) {
      return 1 * f;
    }
    return 0;
  });
  $.each(rows, function(index, row) {
    table.children('tbody').append(row);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-sortable">
  <thead>
    <tr>
      <th scope="col" class="column-head"><span>Date</span></th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="column-values">20/01/2015</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">20/02/2016</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">10/01/2017</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">08/01/2017</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">12/04/2013</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">12/03/2013</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/bb4659av/

Answer 1

您可以将日期转换为 YYYY/MM/DD 格式，然后使用 localeCompare 对其进行排序。

function getVal(elm, n) {
  var v = $(elm).find('td').eq(n).text().toUpperCase();
  v = v.replace(/(..)\/(..)\/(....)/, '$3/$2/$1');
  return v;
}

var f = 1;
$(".table-sortable .column-head").find('span,img').click(function(event) {
  event.preventDefault();
  table = $(this).closest('table');
  th = $(this).parent();
  $(th).find('span,img').toggleClass('rotate');

  f *= -1;
  var n = th.prevAll().length;
  var rows = table.find('tbody  tr').get();
  rows.sort(function(a, b) {
    var A = getVal(a, n);
    var B = getVal(b, n);
    return f * A.localeCompare(B);
  });
  $.each(rows, function(index, row) {
    table.children('tbody').append(row);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-sortable">
  <thead>
    <tr>
      <th scope="col" class="column-head"><span>Date</span></th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="column-values">20/01/2015</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">20/02/2016</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">10/01/2017</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">08/01/2017</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">12/04/2013</td>
    </tr>
    <tr class="table-row">
      <td class="column-values">12/03/2013</td>
    </tr>
  </tbody>
</table>