Paging is reset when data is updated with Angular-DataTables

Refresh

December 2018

Views

4.4k time

6

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

2 answers

10

Включить или отключить сохранение состояния. Когда включено aDataTables будет хранить информацию о состоянии, таких как положение постраничного, длина отображения, фильтрация и сортировка. Когда конечный пользователь перезагружает страницу состояние стола будет изменено, чтобы соответствовать тому, что они ранее создали.

использовать ==> .withOption('stateSave', false) //or true as the case

пример

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

чтобы узнать больше читать документацию stateSave

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

4

Вы можете получить текущую листать dtInstance

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

а затем перерисовать, но остаться на текущей номер страницы

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

Очевидно, что я не могу повторить свой код / ​​сценария 1: 1, но я хотел бы получить текущую страницу как первое дело formatServerData()

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

и после форматирования serverData

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