AngularJS+UI Router下Jquery DataTable动态数据加载异常问题

我来帮你搞定这个问题！这种情况几乎都是因为DataTables初始化时，AngularJS还没完成动态数据的DOM渲染，导致表格没检测到数据。结合你用UI Router懒加载的场景，咱们一步步来解决：

1. 核心解决方案：数据加载后手动刷新DataTables #

你用ui-jq="dataTable"自动初始化表格，但Angular异步请求数据的过程是在表格初始化之后完成的，DataTables不会自动感知到后续的DOM变化。所以需要在数据返回成功后，等待Angular完成DOM更新，再手动刷新表格。

修改你的Controller里的$http成功回调（记得给Controller注入$timeout服务）：

app.controller('WorkFlowController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.wfPkgTblOpt = {
        destroy: true,
        bPaginate: true,
        bLengthChange: false,
        autoWidth: false,
        pageLength: 5
    };

    $scope.getUserPackages = function(userId){
        console.log( "getUserPackages--for UserID---"+userId);
        $http({
            method : "GET",
            url : "package/getPackages.htm",
            params:{'userId':userId}
        }).then(function mySuccess(response) {
            $scope.pkgWFList = response.data;
            
            // 关键：用$timeout等待Angular完成DOM渲染后，刷新表格
            $timeout(function() {
                var dataTable = $('#wfPkgTbl').DataTable();
                dataTable.draw(); // 重新绘制表格，识别新数据
            });

            var pkgId = $scope.pkgWFList[0].packageId ;
            $scope.getWorkflow (pkgId);
            $scope.getVectors(pkgId);
        }, function myError(response) {
            $scope.danger(response.statusText);
        });
    };

    $scope.getUserPackages($scope.userId);
}]);

2. 处理ng-include的DOM渲染延迟 #

你在<tr>里用了ng-include加载模板，这会导致表格行的DOM生成时间更晚。上面的$timeout已经能解决这个问题，因为它会等待Angular的digest cycle完成（包括模板渲染）。如果想简化结构，也可以把模板内容直接写到<tr>里：

<tbody>
    <tr ng-repeat="pkg in pkgWFList">
        <td style="display:none">{{pkg.packageId}}</td>
        <td style="text-align:center;">{{$index+1}}</td>
        <td>{{pkg.packageName}}</td>
        <td>{{pkg.clientName}}</td>
    </tr>
</tbody>

3. 支持后续数据操作（新增/删除/修改） #

之后如果有数据更新操作，同样需要在数据变化后调用draw()刷新表格。比如删除数据的示例：

$scope.deletePackage = function(packageId) {
    // 调用删除API
    $http.delete('package/delete.htm', {params: {packageId: packageId}})
        .then(function(response) {
            // 从数组中移除对应数据
            $scope.pkgWFList = $scope.pkgWFList.filter(pkg => pkg.packageId !== packageId);
            // 刷新表格
            $timeout(function() {
                $('#wfPkgTbl').DataTable().draw();
            });
        });
};

4. 可选：用Angular专属DataTables插件优化 #

如果不想手动处理DOM刷新，可以使用angular-datatables插件（专门为AngularJS封装的DataTables），它会自动和Angular的数据绑定同步，减少手动操作。不过这个需要调整现有代码结构，如果你想保持当前的ui-jq用法，上面的方法完全够用。

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