Paging reset when data is updated using Angular -DataTables

Question

We have a web form using Angular DataTables (DataTables 1.10.10 / angular -datatables - v0.5.3). We load data using JSON coming from the backend. The table is configured for paging, and the data that feeds the table is manually reloaded every 10 seconds. All this works fine when I select another page from the 1st, and the table is updated, and then the reset swap. I tried different draw options ( https://datatables.net/reference/api/draw () ) but it didn't make any difference. Thank you very much 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); } }); }]); 

Answer 1

Enable or disable state saving. When enabled, aDataTables will store status information such as pagination position, display length, filtering, and sorting. When the end user reloads the page, the state of the table will be changed according to what they previously configured.

use ==> .withOption('stateSave', false) //or true as the case

Example

 $scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('stateSave', false) .withPaginationType("simple_numbers") .withDisplayLength(25) .withOption("retrieve", true) .withOption('order', [0, 'desc']); 

to read more, read the stateSave documentation

https://datatables.net/reference/option/stateSave

Answer 2

You can get the current page through dtInstance

 var page = $scope.dtInstance.DataTable.page() 

and then redraw, but stay on the current page number

 $scope.dtInstance.DataTable.page(page).draw(false) 

Obviously, I cannot replicate your code / script 1: 1, but I would get the current page as the first thing in formatServerData()

 var formatServerData = function(serverData) { var page = $scope.dtInstance.DataTable.page() ... 

and after formatting serverData

 if ($scope.dtInstance.DataTable) { $timeout(function() { $scope.dtInstance.DataTable.page(page).draw(false) }) }