Birth列排序异常：点击后按Number列排序的问题排查

核心问题分析 #

你的代码存在两个关键问题导致Birth列排序异常：

1. 统一数值解析逻辑错误：用parseInt(..., 16)处理所有列值，日期字符串中的-会让解析提前终止，所有日期最终被解析为相同的十六进制数值，排序时无法区分，只能保持原顺序（看起来像是按Number列排序）。
2. 全局排序方向干扰：共用的sortDirection变量会导致切换列时排序方向混乱，无法独立控制每列的排序逻辑。

修正后的代码 #

JavaScript 部分

$(document).ready(() => {
    // 为每个表头初始化独立的排序方向（1=升序，-1=降序）
    $('th').each(function (columna) {
        $(this).data('sortDirection', 1);
        
        $(this).click(function () {
            const currentColIndex = columna;
            const tableRows = $('table tbody tr').get();
            const currentSortDir = $(this).data('sortDirection');

            tableRows.sort(function (rowA, rowB) {
                // 获取当前列的值并去除首尾空格
                let valA = $(rowA).find('td').eq(currentColIndex).text().trim();
                let valB = $(rowB).find('td').eq(currentColIndex).text().trim();

                // 根据列类型选择比较逻辑
                switch(currentColIndex) {
                    case 0: // Name/Number列：转十进制整数
                        valA = parseInt(valA, 10);
                        valB = parseInt(valB, 10);
                        break;
                    case 1: // Birth列：转Date对象
                        valA = new Date(valA);
                        valB = new Date(valB);
                        break;
                    case 2: // Type列：不区分大小写的字符串比较
                        valA = valA.toUpperCase();
                        valB = valB.toUpperCase();
                        break;
                }

                // 根据排序方向返回比较结果
                if (valA < valB) return -1 * currentSortDir;
                if (valA > valB) return 1 * currentSortDir;
                return 0;
            });

            // 切换当前列的排序方向
            $(this).data('sortDirection', currentSortDir * -1);

            // 重新渲染表格行
            $('table tbody').empty().append(tableRows);
        });
    });
});

HTML 部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Birth</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2022-09-22</td>
        <td>A</td>
      </tr>
     <tr>
        <td>2</td>
        <td>2022-09-26</td>
        <td>B</td>
      </tr>
     <tr>
        <td>1</td>
        <td>2022-09-21</td>
        <td>A</td>
      </tr>
      <tr>
        <td>5</td>
        <td>2022-09-29  </td>
        <td>C</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2022-09-27</td>
        <td>C</td>
      </tr>
      <tr>
        <td>4</td>
        <td>2022-09-30</td>
        <td>D</td>
      </tr>
    </tbody>
  </table>
</body>

关键修复点说明 #

• 独立的排序方向：通过data()方法为每个表头存储专属的排序方向，避免全局变量的交叉干扰。
• 分类型比较逻辑：针对数字、日期、字符串三种类型分别处理：
  • 数字列转十进制整数比较，避免十六进制解析的错误。
  • 日期列转Date对象，利用日期对象可直接比较的特性。
  • 字符串列转大写后比较，实现不区分大小写的排序。
• 空格处理：用trim()去除日期字符串首尾的空格，避免Date对象解析失败。
• 清晰的排序逻辑：直接在排序回调中应用排序方向，无需额外反转数组，代码更易读。

内容的提问来源于stack exchange，提问作者popo