使用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对其进行排序。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

作为比较，一旦您在列中有一个单元格进行排序，这里就是使用POJS的版本。我认为jQuery替代方案会更有效率。

＆＃34;升序＆＃34;对我来说是模棱两可的，我猜你想要最新的日期。要颠倒顺序，只需在sort函数中反转比较。

＆＃13;

＆＃13;

/* Given a table cell, find the parent table and sort the first tbody's
** rows by the given column as dates in format dd/mm/yyyy. Sorts most
** recent date to top, oldest to bottom.
*/
function sortAsDate(cell) {
  var col = cell.cellIndex,
      table = cell.parentNode.parentNode.parentNode,
      tbody = table.tBodies[0],
      formatter = row => row.cells[col].textContent.split(/\D/).reverse().join('');

  Array.from(tbody.rows)
       .sort((a, b) => formatter(a).localeCompare(formatter(b)))
       .reduceRight((acc, row) => tbody.appendChild(row), null);
}

＆＃13;

<table class="table-sortable">
  <thead>
    <tr>
      <th scope="col" class="column-head"><span onclick="sortAsDate(this.parentNode)">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>

＆＃13;

＆＃13;

＆＃13;