jquery 排序 table 没有插件

Question

您好，我正在使用 jquery 对 table 进行排序，点击“th”标签，我的代码运行良好，但仅适用于数字和文字，但不适用于日期，是代码有什么问题：

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>b</td>
      <td>13/03/1998</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>02/01/2005</td>
    </tr>
    <tr>
      <td>2</td>
      <td>c</td>
      <td>10/12/2022</td>
    </tr>
  </tbody>
</table>

和 js :

$(document).on('click', 'th', function() {
  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();
  }
  table.children('tbody').empty().html(rows);
});

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

提前致谢

Answer 1

按照当前编写的方式，您的代码将每个日期视为一个字符串，并按字母数字而不是按时间顺序对其进行排序。

假设你的日期都是dd/mm/yyyy格式，那么你可以re-arrange将日期字符串转换成适合排序的数字格式yyyymmdd：

function reformatDate(val) {
  return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2);
}

您可以在 comparer() 函数中使用此函数，方法是检查列索引：

if ( index === 2 ) {
  valA = reformatDate(valA);
  valB = reformatDate(valB);
  console.log(valA, valB);
}

演示：

$(document).on('click', 'th', function() {
  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();
  }
  table.children('tbody').empty().html(rows);
});

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);
    if ( index === 2 ) {
      valA = reformatDate(valA);
      valB = reformatDate(valB);
      //console.log(valA, valB);
    }
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);
  };
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}

function reformatDate(val) {
  return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2);
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <style>
  </style>

</head>

<body>

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>b</td>
      <td>13/03/1998</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>02/01/2005</td>
    </tr>
    <tr>
      <td>2</td>
      <td>c</td>
      <td>10/12/2022</td>
    </tr>
  </tbody>
</table>


</body>

</html>

这种方法将您的约束“无插件”表示除了 jQuery 之外没有任何其他插件，这由您问题中的代码暗示。

jquery 排序 table 没有插件

jquery sort table without plugin

javascript

datatable

jquery