我将 AngularJS 和 Datatables 与服务器端脚本一起使用,以通过 AJAX 获取数据。
我的 Controller 看起来像:
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 直接进入页面或刷新时,它只是将数据放在表的顶部,同时仍然保持“表中没有可用数据”并且没有数据表功能正常工作。
最佳答案
与 Angular ui-router您可以在调用状态 Controller 之前解析您的后端数据。
请查看下面或此 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>
关于javascript - 在 AngularJS 中通过 AJAX 加载数据后如何重新初始化数据表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31548590/