如何让Tablesorter姓名列在升序状态下切换按名/姓排序

要实现点击全名表头时在「名字升序」和「姓氏升序」之间切换，你可以基于找到的示例修改，核心思路是拆分全名、用状态变量控制排序依据，同时覆盖默认的升降序切换行为：

完整代码示例 #

<!-- 示例表格结构 -->
<table id="nameTable" class="tablesorter">
  <thead>
    <tr>
      <th>全名</th>
      <!-- 其他列按需添加 -->
    </tr>
  </thead>
  <tbody>
    <tr><td>John Doe</td></tr>
    <tr><td>Alice Smith</td></tr>
    <tr><td>Bob Johnson</td></tr>
    <tr><td>Mary Ann Williams</td></tr>
  </tbody>
</table>

$(function () {
    // 标记当前排序依据：true=按名字升序，false=按姓氏升序
    let sortByFirstName = true;

    $('#nameTable').tablesorter({
        theme: 'blue',
        // 提取单元格内容时拆分名字和姓氏
        textExtraction: {
            0: function (node) {
                const fullName = $(node).text().trim();
                // 拆分名字和姓氏：取第一个空格前的内容为名字，剩余部分为姓氏（兼容中间名）
                const nameParts = fullName.split(' ');
                const firstName = nameParts.shift();
                const lastName = nameParts.join(' ');
                // 用分号拼接，方便排序时拆分
                return `${firstName};${lastName}`;
            }
        },
        // 自定义排序逻辑
        textSorter: function (a, b) {
            const [aFirst, aLast] = a.split(';');
            const [bFirst, bLast] = b.split(';');
            // 根据状态选择排序字段，统一用自然升序
            return sortByFirstName 
                ? $.tablesorter.sortNatural(aFirst, bFirst)
                : $.tablesorter.sortNatural(aLast, bLast);
        },
        initialized: function () {
            const $nameHeader = $('#nameTable').find('th').eq(0);
            $nameHeader.click(function (e) {
                // 阻止tablesorter默认的升降序切换
                e.preventDefault();
                // 切换排序状态
                sortByFirstName = !sortByFirstName;
                // 更新表头文本，提示当前排序规则
                $nameHeader.find('.tablesorter-header-inner').text(
                    sortByFirstName ? '全名（按名字升序）' : '全名（按姓氏升序）'
                );
                // 手动触发排序，0代表第一列，0代表升序（这里始终用升序）
                $('#nameTable').trigger('sorton', [[[0, 0]]]);
            });
            // 初始化表头文本
            $nameHeader.find('.tablesorter-header-inner').text('全名（按名字升序）');
        }
    });
});

关键部分说明 #

1. textExtraction 处理全名拆分：
   把每个单元格的全名拆成「名字」和「姓氏」两部分，用分号拼接成字符串。这里兼容带中间名的情况——取第一个空格前的内容为名字，剩余所有内容作为姓氏。

2. 状态变量控制排序依据：
   用sortByFirstName变量标记当前是按名字还是姓氏排序，每次点击表头就切换这个变量的值。

3. textSorter 自定义排序：
   根据状态变量选择对应的字段，调用$.tablesorter.sortNatural做自然升序排序（避免字符串排序时的数字异常问题）。

4. 覆盖表头默认行为：
   阻止表头点击的默认事件（避免触发升降序切换），切换状态后手动触发排序，并更新表头文本让用户清楚当前的排序规则。

注意事项 #

• 如果你的全名格式有特殊情况（比如姓氏在前），可以调整textExtraction里的拆分逻辑。
• 若要保留tablesorter默认的排序图标，可自定义CSS或修改插件的图标显示逻辑，匹配当前的排序状态。

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