使用tablesorter实现动态表格排序：Angular动态数据不生效求助

这个问题我之前也碰到过，核心原因是jQuery Tablesorter插件初始化的时机不对——它在页面加载完成后就绑定了排序逻辑，但Angular的ng-repeat是异步渲染数据的，初始化插件的时候，<tbody>里还没有动态生成的行，自然没法给这些行绑定排序事件。另外我注意到你的HTML代码里有一个多余的</td>标签（最后一个<td>后面），这个DOM结构错误也可能导致插件失效，建议先修复它。

下面给你几个可行的解决思路：

1. 数据加载完成后重新初始化Tablesorter #

在Angular控制器中，等showdata数据完全加载并渲染到DOM后，再手动触发Tablesorter的初始化或更新。因为Angular的数据绑定是异步的，需要用$timeout确保DOM已经更新完成：

// 假设你通过$http获取数据
$http.get('/your-data-source').then(function(response) {
  $scope.showdata = response.data;
  
  // 用$timeout等待Angular完成DOM渲染
  $timeout(function() {
    // 初始化或更新tablesorter
    $("#myDummyTable").tablesorter({
      // 这里可以添加你的配置项，比如日期格式、排序默认值等
      dateFormat: "mmddyyyy"
    });
  });
});

如果后续数据有更新（比如新增、删除行），同样需要在数据变更后调用$("#myDummyTable").trigger("update");来让插件重新识别新的行。

2. 封装Angular指令实现自动初始化 #

为了更符合Angular的开发模式，避免直接在控制器里操作DOM，可以写一个自定义指令，监听ng-repeat的渲染完成事件，自动初始化Tablesorter：

angular.module('yourAppName').directive('tablesorter', function($timeout) {
  return {
    restrict: 'C', // 匹配class为tablesorter的元素
    link: function(scope, element) {
      // 深度监听showdata数组的变化
      scope.$watch('showdata', function(newData) {
        if (newData && newData.length > 0) {
          $timeout(function() {
            element.tablesorter();
          });
        }
      }, true);
    }
  };
});

这样你的表格只需要保持tablesorter类即可，指令会自动在数据准备好后初始化插件，不用再手动调用。

3. 改用Angular原生表格组件（推荐） #

如果项目允许，更推荐使用专为Angular设计的表格组件，比如ng-table或angular-ui-grid，这些组件自带排序、分页等功能，完全适配Angular的异步数据渲染，不用依赖jQuery插件，减少兼容性问题。

以ng-table为例，简单实现排序的步骤：

• 引入ng-table的依赖（JS和CSS）
• 控制器中配置表格参数：

angular.module('yourAppName').controller('YourController', function($scope, NgTableParams) {
  // 假设showdata已经获取完成
  $scope.tableParams = new NgTableParams({}, { dataset: $scope.showdata });
});

• HTML模板：

<table ng-table="tableParams" class="table table-bordered">
  <thead>
    <tr>
      <th title="'Name'" sortable="'name'">Name</th>
      <th title="'Age'" sortable="'age'">Age</th>
      <th title="'Birth Date'" sortable="'birthdate'">Birth Date</th>
      <!-- 其他列同理 -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="show in $data">
      <td>{{ show.name }}</td>
      <td>{{ show.age }}</td>
      <td>{{ show.birthdate }}</td>
      <!-- 其他列 -->
    </tr>
  </tbody>
</table>

这样点击表头就能直接实现排序，完全不用手动处理插件初始化的时机问题。

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