如何在AngularJS中通过AJAX加载数据后重新初始化数据表？答案

【问题标题】：How do I re-initialize datatables AFTER data has loaded via AJAX in AngularJS?如何在AngularJS中通过AJAX加载数据后重新初始化数据表？
【发布时间】：2015-10-11 11:16:57
【问题描述】：

我正在使用 AngularJS 和 Datatables 以及服务器端脚本通过 AJAX 获取数据。

我的控制器看起来像：

var currentJobId = $stateParams.jobId;
var selectedJobId = $rootScope.currentJob;

if (currentJobId !== selectedJobId) {
    $rootScope.currentJob=$stateParams.jobId;
    var data = {
        id: $stateParams.jobId
    }
    $http.post('http://localhost/angular/scripts/getJob.php', data).success(function (thedata) {
        $scope.job = thedata.information;
        $scope.jobNotes = thedata.notes;
        $scope.jobMaterialUsage = thedata.materialUsage;
        $scope.jobItems = thedata.jobItems;
        $scope.jobSubcontractorCosts = thedata.subcontractorCosts;
        $scope.jobBondMiscCosts = thedata.bondMiscCosts;
        $scope.jobEmployeeTime = thedata.employeeTime;
    });
}

示例表如下所示：

<table class="table table-striped table-hover row-links" id="employeeTimeTable" ui-jq="dataTable" ui-options="tableOptions">
    <thead>
        <tr>
            <th>Employee Name</th>
            <th>Total Hours</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="time in jobEmployeeTime" ng-click="goToEmployee(job.id,time.id);">
            <td>{{time.name}}</td>
            <td>{{time.total_minutes}}</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Employee Name</th>
            <th>Total Hours</th>
        </tr>
    </tfoot>
</table>

所以它基本上是查看作业 ID 是否已更改，如果已更改，它会为新作业信息发出 ajax 调用 - 如果未更改，则不执行任何操作。我遇到的问题是，当我点击刷新时，在数据加载之前，我的表正在使用数据表进行初始化。离开页面并返回到它会正确初始化数据表，但是当通过 URL 直接进入页面或刷新时，它只是将数据放在表的顶部，同时仍然保持“表中没有可用的数据”并且没有数据表功能正常工作。

【问题讨论】：

您确定条件currentJobId !== selectedJobId 中的变量按预期工作吗？考虑删除 if (currentJobId !== selectedJobId) { 进行测试
您应该创建自己的指令来初始化数据表并与之交互，并能够正确使用它的 API，或者最好使用已经存在的 API。一个插件太复杂了，不能简单地放入ui-jq标签并且无法控制它
是的，他们正在工作。其实放一个简单的 $state.go($state.current, {}, {reload: true});在 $scope.jobEmployeeTime = thedata.employeeTime 之后；在帖子中修复了刷新问题（因为它正在刷新视图）......但是如果我将其用作解决方案，我会遇到其他问题。
还可以考虑使用角度网格系统，该系统可提供您想要的数据表功能集

标签： javascript jquery ajax angularjs datatables

【解决方案1】：

使用Angular ui-router，您可以在调用状态控制器之前解析后端数据。

请看下面的演示或jsFiddle。

它没有数据表，但这可能是更容易添加的部分。

(function() {
'use strict';

angular.module('demoApp', ['ui.router', 'angularSpinner'])
    .run(StartUp)
    .factory('jobsDataService', JobsDataFactory)
    .config(Config);

function JobsDataFactory($http) {
    var backendUrl = 'http://jsonplaceholder.typicode.com';
    
    return {
        get: function(id) {
            return $http.jsonp(backendUrl + '/posts/'+id +'?callback=JSON_CALLBACK')
                .then(function(response) {
                    return response.data;
            });
        }
    };
}

function Config($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/jobs/1');
    
    $stateProvider
        .state('jobs',
               {
                   url: '/jobs/:id',
                   templateUrl: 'partials/post.html',
                   resolve: {
                       job: function(jobsDataService, $stateParams) {
                           console.log($stateParams.id);
                           return jobsDataService.get($stateParams.id);
                       }
                   },
                   controller: function($scope, job) {
                       console.log(job);
                       $scope.job = job;
                   }
               });
}

function StartUp($rootScope){
    // only used for loading spinner
    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $rootScope.loading = true;
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $rootScope.loading = false;
        });

}
    
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.2/angular-spinner.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

<div ng-app="demoApp">
    <span us-spinner="" ng-if="loading"></span>
    <a href="#" ui-sref='jobs({id: 1})'>job 1</a>
    <a href="#" ui-sref='jobs({id: 2})'>job 2</a>
    <a href="#" ui-sref='jobs({id: 3})'>job 3</a>
    <div ui-view=""></div>
    
    <script type="text/ng-template" id="partials/post.html">
        <p>debug id = {{job.id}}</p>
        <h1>{{job.title}}</h1>
        <p>{{job.body}}</p>
    </script>
</div>

【讨论】：