Paging is reset when data is updated with Angular-

Question

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);
        }
    });
}]);

Answer 1

You can get the current page through the dtInstance

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

and then redraw but stay on the current page number by

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

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

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

and after formatting of serverData

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

Answer 2

Enable or disable state saving. When enabled aDataTables will store state information such as pagination position, display length, filtering and sorting. When the end user reloads the page the table's state will be altered to match what they had previously set up.

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 learn more read the documentation stateSave

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