我们有一个使用Angular DataTables的Web表单(DataTables 1.10.10 / angular-datatables – v0.5.3).我们使用来自后端的
JSON提供数据.该表配置了分页,每10秒手动重新加载表的数据.这一切都运行正常,当我从第一个页面中选择一个不同的页面并刷新表格然后重置分页.我尝试了绘制(
https://datatables.net/reference/api/draw())方法的不同参数,但没有任何区别..
提前谢谢了!!
提前谢谢了!!
我的HTML表格:
<table datatable="ng" id="datatable1" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-hover" dt-instance="dtInstance">
< tr ng-repeat =“data.serverData [data.selectedAgent]中的会话”class =“gradeX”>
这是我们的控制器:
App.controller("ReportAgentSessionsListController",[ "$scope","$http","sessionsListData","$timeout","DTOptionsBuilder","DTColumnDefBuilder",function ($scope,$http,sessionsListData,$timeout,DTOptionsBuilder,DTColumnDefBuilder,DTInstances) { $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType("simple_numbers").withDisplayLength(25).withOption("retrieve",true).withOption('order',[0,'desc']); $scope.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0),DTColumnDefBuilder.newColumnDef(1),DTColumnDefBuilder.newColumnDef(2),DTColumnDefBuilder.newColumnDef(3).notSortable(),]; // Get original request params $scope.dateData = JSON.parse(sessionsListData.config.data); var timer; // used for auto-refresh var vm = this; $scope.cduInterval = 1000; $scope.counter = 0; $scope.dtInstance = {}; $scope.data = {}; $scope.data.serverData = []; var formatServerData = function(serverData) { $scope.agentsList = Object.keys(serverData); // If no agent has been selected if (!$scope.data.selectedAgent) { $scope.data.selectedAgent = $scope.agentsList[0]; } // Format data for (var key in serverData) { if (serverData.hasOwnProperty(key)) { for (var i = 0; i < serverData[key].length; i++) { var data = serverData[key][i]; data.waitTime = numeral(data.waitTime).format("00:00:00"); data.handleTime = numeral(data.handleTime).format("00:00:00"); data.revenue = numeral(data.revenue).format("$0,0.00"); } } } $scope.data.serverData = serverData; // This does not do anything apparently if ($scope.dtInstance.DataTable) { $scope.dtInstance.DataTable.draw('full-hold'); } }; var scheduleTimeout = function () { var getFreshDataInterval = 1000; timer = $timeout(getFreshData,getFreshDataInterval); }; // Request a new set of data from the server var getFreshData = function () { if ($scope.counter++ % 10 == 0) { // Requests to server will be done every 10th request (10 secs) var response = $http({ abp: true,url: abp.appPath + "Report/GetTeamSessionsByTimeInterval",method: "POST",data: sessionsListData.config.data }).then(function (response) { formatServerData(response.data); if (timer) { scheduleTimeout(); } }); } else { if (timer) { scheduleTimeout(); } } }; // Is currentdate between the date ranges being displayed var isTodayInRage = function (currentdate) { .. } formatServerData(sessionsListData.data); if (isTodayInRage(userCurrentDate)) { // Date range includes Today (local time) scheduleTimeout(); } $scope.selectAgent = function(agent) { $scope.data.selectedAgent = agent; }; $scope.$on("$destroy",function () { if (timer) { $timeout.cancel(timer); } }); }]);
启用或禁用状态保存.启用后,aDataTables将存储状态信息,例如分页位置,显示长度,过滤和排序.当最终用户重新加载页面时,表的状态将被更改以匹配他们之前设置的状态.
使用==> .withOption(‘stateSave’,false)//或者为true
例
$scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('stateSave',false) .withPaginationType("simple_numbers") .withDisplayLength(25) .withOption("retrieve",true) .withOption('order','desc']);
要了解更多,请阅读文档stateSave