没有插件的jquery排序表

Question

您好，我正在使用 jquery 在单击“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 ，那么您可以将日期字符串重新排列为适合排序的数字格式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排序表

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-25 14:50:43

没有插件的jquery排序表

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-25 14:50:43

解决方案1
0 已采纳 2022-05-25 14:50:43