We have a Web form using Angular DataTables (DataTables 1.10.10 / angular-datatables - v0.5.3). We are feeding the data with a JSON coming from the backend. The table is configured with paging, and data feeding the table is reloaded manually every 10 secs. This is all working fine, when I select a different page from 1st one and the table get refreshed then paging is reset. I tried the different params of the draw(https://datatables.net/reference/api/draw()) method but did not make any difference.. Many thanks in advance!!
My HTML table:
<table datatable="ng" id="datatable1" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-hover" dt-instance="dtInstance">
<tr ng-repeat="session in data.serverData[data.selectedAgent]" class="gradeX">
This is our controller:
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);
}
});
}]);