[英]How do I re-initialize datatables AFTER data has loaded via AJAX in AngularJS?
我正在使用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直接进入页面或刷新时,只需将数据放在表的顶部,同时仍然保持“表中没有数据”而没有数据表功能正常工作。
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.