JQuery Tablesorter在AJAX动态表格中失效问题求助

先来说说你遇到的两个问题，我帮你一步步拆解解决：

一、Tablesorter .trigger('update') 无效的问题 #

看你的代码，问题主要出在初始化时机和调用顺序上：

• 嵌套的$(function() {})完全没必要：你已经在AJAX回调里操作DOM了，这时候DOM肯定已经就绪，再包一层DOM ready函数反而会导致Tablesorter初始化时机滞后，错过数据更新的节点。
• 选择器不够精准：$("Table")会选中页面上所有表格，建议给目标表格加个明确ID（比如#tripTable），避免误操作其他无关表格。
• update调用顺序错误：必须等所有行都append完成后，再去初始化或更新Tablesorter——如果是第一次加载表格就初始化插件，如果表格已经初始化过，再调用trigger('update')。

修改后的核心代码片段：

function tableLoader(){ 
  $.ajax({ 
    url: 'http://127.0.0.1:8000/index_script' 
  }).then(function (data) { 
    $('#apnd').empty(); 
    for (var i = 0; i < data.length; i++) { 
      if((data[i].autor)==(getname())){ 
        // 注意：这里把数据单元格的<th>改成<td>，符合HTML规范（<th>是表头专用）
        $('#apnd').append("<tr>"+ 
          "<td><input value='"+data[i].trip_name+"' id='trip_name"+data[i].id+"'></td>"+ 
          "<td><input value='"+data[i].start_city+"' id='start_city"+data[i].id+"'></td>"+ 
          "<td><input value='"+data[i].end_city+"' id='end_city"+data[i].id+"'></td>"+ 
          "<td><input type=\"number\" value="+data[i].days+" id=days"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].day_cost+" id=day_cost"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].hotel_per_day_cost+" id=hotel_per_day_cost"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].air_tickets_cost+" id=air_tickets_cost"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].other_transport_cost+" id=other_transport_cost"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].ticket_to_city_cost+" id=ticket_to_city_cost"+data[i].id+"></td>"+ 
          "<td><input type=\"number\" value="+data[i].ticket_from_city_cost+" id=ticket_from_city_cost"+data[i].id+"></td>"+ 
          "<td>"+data[i].autor+"</td>"+ 
          "<td><button type=\"button\" id=\"Edit\" value=\""+data[i].id+"\">Edit</button></td>"+ 
          "<td><button type=\"button\" id=\"Delete\" value=\""+data[i].id+"\">Delete</button></td>"+ 
          "</tr>"); 
      }
    } 
    // 选中外层表格（假设表格ID为tripTable，#apnd是tbody）
    var $table = $("#tripTable");
    // 判断是否已初始化过Tablesorter
    if ($table.hasClass('tablesorter')) {
      // 已初始化，更新数据并重新应用插件
      $table.trigger('update');
      $table.trigger('applyWidgets');
    } else {
      // 第一次初始化插件
      $table.tablesorter({ 
        theme : 'default', 
        cssInfoBlock : "tablesorter-no-sort", 
        widgets: [ 'zebra', 'stickyHeaders' ] 
      });
    }
  }); 
} 
tableLoader();

二、Stupidtable字符串排序异常的问题 #

Stupidtable默认根据单元格的文本内容排序，但你的单元格里是<input>元素，单元格本身的文本是空的，实际值存在input的value属性里，这才导致排序混乱。解决方法有两种：

方法1：给单元格添加data-sort属性（推荐） #

在append行的时候，给每个包含input的单元格添加data-sort，存入input的实际值，让Stupidtable直接读取这个属性排序：

// 示例：修改trip_name的单元格
"<td data-sort='"+data[i].trip_name+"'><input value='"+data[i].trip_name+"' id='trip_name"+data[i].id+"'></td>"

方法2：自定义排序函数 #

针对input类型的列，自定义排序逻辑，主动读取input的value值：

// 初始化Stupidtable时指定自定义排序规则
$("#tripTable").stupidtable({
  "string": function(a, b) {
    // a、b是单元格元素，读取内部input的value并转小写做排序
    var valA = $(a).find('input').val().toLowerCase();
    var valB = $(b).find('input').val().toLowerCase();
    return valA.localeCompare(valB);
  }
});

重要提醒：你之前用<th>作为数据单元格是不符合HTML规范的，一定要改成<td>，表头专用<th>放在<thead>里——不管用哪个排序插件，正确的表格结构都是功能正常的基础。

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