1
我正在使用AngularJS和Datatables以及服务器端脚本通过AJAX获取数据。如何在数据通过AJAX在AngularJS中加载后重新初始化数据表?
我的控制器看起来像:
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){'用于测试这个 –
您应该创建自己的指令来初始化并与dataTables交互,并且能够正确使用它的API,或者更好地使用已存在的指令。插入一个'ui-jq'标签并且无法控制它是太复杂的插件 – charlietfl
是的,它们正在工作。事实上,把一个简单的$ state.go($ state.current,{},{reload:true});在$ scope.jobEmployeeTime = thedata.employeeTime后;在帖子中修复刷新问题(因为它刷新视图)...但是,如果我将它用作解决方案,则会遇到其他问题。 – jdgower