Ajax加载的MySQL表格排序功能失效，求助解决方法

嘿，我之前也踩过Ajax加载表格后排序失效的坑，大概率是排序逻辑/插件的初始化时机不对，或者表格结构、自定义代码有遗漏，给你拆解下问题和解决办法：

Ajax是异步请求，如果你在页面刚加载完就初始化排序插件/自定义逻辑，这时候表格里还没有从MySQL拉取的数据，插件根本找不到要绑定的DOM元素，自然没法生效。

解决办法1：在Ajax回调里初始化排序 #

不管用tablesorter还是自定义排序，都要等表格数据完全渲染到页面后再执行初始化代码。举个jQuery Ajax的例子：

// 发起Ajax请求拉取表格数据
$.ajax({
  url: '你的数据接口地址',
  method: 'GET',
  success: function(data) {
    // 第一步：把返回的数据渲染到表格tbody里
    $('#gods tbody').html(data);
    
    // 第二步：此时表格已有数据，再初始化排序
    // 如果用tablesorter：
    $('#gods').tablesorter();
    
    // 如果用你自己写的自定义排序：
    initCustomSort();
  }
});

解决办法2：补全你的自定义排序代码 #

你给出的代码片段没写完，这里给你补全完整的表头点击排序逻辑，同样要确保在表格加载完成后调用：

function initCustomSort() {
  var table = $('#gods');
  $('#tname, #bdmg')
    .wrapInner('<span title="sort this column"/>')
    .each(function() {
      var th = $(this), thIndex = th.index(), inverse = false;
      
      th.click(function() {
        // 对tbody里的行进行排序
        table.find('tbody tr').sort(function(a, b) {
          // 获取当前列的单元格文本
          var valA = $(a).find('td').eq(thIndex).text().trim();
          var valB = $(b).find('td').eq(thIndex).text().trim();
          
          // 区分数字和字符串排序
          if (!isNaN(valA) && !isNaN(valB)) {
            // 数字排序，支持倒序切换
            return inverse ? valB - valA : valA - valB;
          } else {
            // 字符串排序，支持中文/英文排序
            return inverse ? valB.localeCompare(valA) : valA.localeCompare(valB);
          }
        }).appendTo(table.find('tbody'));
        
        // 切换排序方向
        inverse = !inverse;
      });
    });
}

额外检查：表格结构是否符合要求 #

不管用插件还是自定义排序，表格必须有标准结构：

<table id="gods">
  <thead>
    <tr>
      <th id="tname">名称</th>
      <th id="bdmg">伤害</th>
    </tr>
  </thead>
  <tbody>
    <!-- Ajax加载的行数据放在这里 -->
  </tbody>
</table>

很多人用Ajax渲染时会漏掉<thead>或<tbody>标签，这会导致插件识别失败，自定义排序也找不到对应元素。

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