使用 Angular-DataTables 更新数据时会重置分页

Posted 2023-05-07

【中文标题】使用 Angular-DataTables 更新数据时会重置分页

【英文标题】：Paging is reset when data is updated with Angular-DataTables

【发布时间】：2016-05-13 13:35:51

【问题描述】：

我们有一个使用 Angular DataTables (DataTables 1.10.10 / angular-datatables - v0.5.3) 的 Web 表单。我们使用来自后端的 JSON 来提供数据。该表配置了分页，并且每 10 秒手动重新加载馈送该表的数据。这一切都很好，当我从第一个页面中选择一个不同的页面并且表格被刷新然后分页被重置时。我尝试了 draw(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="session in 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);
        
    );
]);

【参考方案1】：

启用或禁用状态保存。启用后，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

【参考方案2】：

可以通过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)
   )

【讨论】：

非常感谢大卫。我能够获取当前页面，但是当我尝试在 formatServerData() 末尾使用它重绘时，它不起作用。页面被重置为第一个..

@JoseParra，抱歉耽搁了这么久。我相信serverData 是用ng-repeat 渲染出来的？您可能在这里遇到了种族问题，尝试将$scope.dtInstance.DataTable.page(page).draw(false) 移动到$timeout（请参阅更新），以便在下一个$digest 中完成页面设置。

大卫，非常感谢您的帮助。是的，我使用的是ng-repeat。不幸的是，它没有用。就像表格在formatServerData() 之后被完全重绘。奇怪的是，对排序顺序的任何更改都不会在刷新时重置。