AJAX生成表格内容时tablesorter JS插件排序功能失效求助

看起来你遇到的核心问题是：初始表格tbody为空时调用tablesorter初始化，后续AJAX加载数据后排序功能失效。我帮你梳理下问题原因和具体修复方案：

问题根源 #

当页面加载时你调用了$("#results").tablesorter()，但此时表格的tbody里没有任何数据，tablesorter无法正确初始化排序所需的事件绑定、数据缓存结构。虽然你尝试了trigger("update")，但这个方法只适用于已有数据的表格更新，空表初始化后再更新数据，它没法触发完整的排序功能重建。

具体修复步骤 #

1. 移除无效的初始tablesorter调用 #

删掉页面加载时的这段代码，因为空表初始化完全没有意义：

$(document).ready(function() { 
  $("#results").tablesorter(); 
} );

2. 修复AJAX代码中的语法错误 #

你的AJAX代码里有几处无效的代码块（比如$( "#genre" ).val(); { ... }这种写法），会导致JS报错，直接影响后续的点击事件绑定。修正后的完整AJAX代码如下：

$(document).ready(function(){
  $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' });
  $("#to_date").datepicker();

  $('#filter').click(function(){
    var to_date = $('#to_date').val();
    var request = $("#genre").val();
    var request1 = $("#price").val();
    
    if(to_date != '' ) {
      $.ajax({
        url:"filter.php",
        method:"POST",
        data: { 
          to_date:to_date, 
          request:request,
          request1:request1 
        },
        success:function(data) {
          $('#results').html(data);
          // 先销毁旧的tablesorter实例（避免重复绑定）
          $("#results").tablesorter('destroy');
          // 重新初始化tablesorter，此时表格已有数据
          $("#results").tablesorter();
        }
      });
    } else {
      alert("Please Select Date");
    }
  });
});

3. 确保返回的HTML结构完整 #

检查你的filter.php返回的HTML，必须包含完整的tbody内容，而且要保证每一行的列数和thead对应（你当前的PHP循环里漏了Price列的输出，记得补上$row["price"]）：

<tbody>
  <tr>
    <td><?php echo $row["event_name"]; ?></td>
    <td><?php echo $row["venue_name"]; ?></td>
    <td><?php echo $row["genre"]; ?></td>
    <td><?php echo $row["event_date"]; ?></td>
    <td><?php echo $row["price"]; ?></td> <!-- 补上这一行，保证列数匹配 -->
  </tr>
  <!-- 其他数据行 -->
</tbody>

4. 验证功能 #

完成上述修改后，点击筛选按钮加载数据，表头应该会出现排序箭头，点击就能正常触发行排序了。

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