sorttable.js无法对ng-repeat填充的表格列进行排序问题

这个问题我之前也碰到过，本质是sorttable.js的初始化时机和AngularJS动态渲染的时机不匹配导致的：sorttable默认会在页面DOM加载完成后（window.onload阶段）扫描带sortable类的表格并初始化排序功能，但你的表格内容是通过ng-repeat动态渲染的——当sorttable完成初始化时，requestData还没加载，tbody里的内容根本不存在，自然没法给动态生成的列绑定排序事件。

下面给你两种可行的解决思路：

方法一：数据加载完成后手动触发sorttable初始化 #

在你的AngularJS控制器里，等requestData数据加载完成，并且确保DOM已经渲染好ng-repeat的内容后，手动调用sorttable的初始化方法。这里推荐用$timeout来确保DOM更新完成（因为ng-repeat渲染结束后不会立即触发同步事件，$timeout会把代码放到Angular的digest cycle之后执行）。

示例代码：

// 假设这是你的控制器逻辑
angular.module('yourApp').controller('YourController', function($scope, $http, $timeout) {
  $scope.loadRequestData = function() {
    // 从API获取数据
    $http.get('/your-request-data-api')
      .then(function(response) {
        $scope.requestData = response.data;
        
        // 数据赋值后，用$timeout确保ng-repeat已渲染完成
        $timeout(function() {
          // 找到目标表格并初始化sorttable
          const targetTable = document.querySelector('#collapseThree-2 .sortable');
          if (targetTable) {
            // 先移除可能已有的sorttable绑定（避免重复初始化）
            sorttable.destroy(targetTable);
            sorttable.makeSortable(targetTable);
          }
        });
      });
  };

  // 页面加载时触发数据加载
  $scope.loadRequestData();

  // 额外处理：如果表格在折叠面板里，展开后也要重新初始化
  $('#collapseThree-2').on('shown.bs.collapse', function() {
    $timeout(function() {
      const targetTable = document.querySelector('#collapseThree-2 .sortable');
      if (targetTable) {
        sorttable.makeSortable(targetTable);
      }
    });
  });
});

方法二：自定义Angular指令封装sorttable初始化 #

如果你的项目里有多个动态表格需要用sorttable，写一个自定义指令会更优雅，它能自动监听数据变化，在ng-repeat完成渲染后自动初始化排序。

示例指令代码：

angular.module('yourApp').directive('sortableDynamicTable', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // 监听ng-repeat的数据源变化
      scope.$watch(attrs.sortableDynamicTable, function(newData) {
        // 只有当数据存在且有内容时才初始化
        if (newData && newData.length > 0) {
          $timeout(function() {
            // 先销毁再初始化，避免重复绑定
            sorttable.destroy(element[0]);
            sorttable.makeSortable(element[0]);
          });
        }
      }, true); // 深度监听，确保数组内容变化时也触发

      // 处理折叠面板展开的情况
      if (attrs.collapseTarget) {
        $(attrs.collapseTarget).on('shown.bs.collapse', function() {
          $timeout(function() {
            sorttable.makeSortable(element[0]);
          });
        });
      }
    }
  };
});

然后在HTML里直接使用这个指令：

<div id="collapseThree-2" class="panel-collapse collapse" expanded="false"> 
  <table class="table table-hover hd-bg table-bordered sortable" 
         sortable-dynamic-table="requestData" 
         collapse-target="#collapseThree-2"> 
    <thead align="center"> 
      <tr> 
        <th>Request ID</th> 
        <th>Request Type</th> 
        <th>Initiator</th> 
        <th>Product</th> 
        <th>Version</th> 
        <th>Submission Date</th> 
        <th>Stage</th> 
      </tr> 
    </thead> 
    <tbody ng-repeat = "x in requestData"> 
      <td ng-bind = "x.id"></td>
      <!-- 其他列内容 -->
    </tbody>
  </table>
</div>

额外注意事项 #

• 确保sorttable.js在AngularJS之后加载，或者至少在调用sorttable.makeSortable之前已经加载完成，否则会报sorttable is not defined的错误。
• 如果表格有分页、搜索过滤等会更新数据的操作，每次数据变化后都需要重新触发sorttable的初始化（方法二的指令会自动处理这个问题）。
• 你的表格结构是符合sorttable要求的（有<thead>和<tbody>，<th>在<thead>内），这部分不需要调整。

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