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

2024-01-18

我们有一个使用 Angular DataTables 的 Web 表单(DataTables 1.10.10 / Angular-datatables - v0.5.3)。我们使用来自后端的 JSON 来提供数据。该表配置了分页,并且每 10 秒手动重新加载一次输入表的数据。当我从第一个页面选择不同的页面并且表格刷新然后分页重置时,这一切都工作正常。我尝试了绘制的不同参数(https://datatables.net/reference/api/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);
        }
    });
}]);

启用或禁用状态保存。启用后,aDataTables 将存储状态信息,例如分页位置、显示长度、过滤和排序。当最终用户重新加载页面时,表的状态将被更改以匹配他们之前设置的状态。

使用==>.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']);

要了解更多信息,请阅读文档 stateSave

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Angular-DataTables 更新数据时会重置分页 的相关文章

随机推荐

  • 如何在没有 SelectionStart 的情况下设置 TextBox 光标位置

    我有一个 Windows 窗体文本框 后台线程每秒更新其值 如果我将光标放在文本框中 它将在下次更新时丢失其当前位置 文本选择也是如此 我试着这样解决它 protected void SetTextProgrammatically stri
  • 单个页面中的两个 xmlHttpRequest

    我对 ajax 相当陌生 但我正在尝试使用 javascript 实现两个简单的调用来动态更改页面上的两个单独的 div 我一次使用一个调用没有问题 但是当我使用两个调用时 似乎第二个 xmlhttprequest 接管第一个调用并写入两个
  • 使用不完全模式匹配作为过滤器?

    假设我有以下代码 type Vehicle Car of string int Bike of string let xs Car family 8 Bike racing Car sports 2 Bike chopper 我可以在命令式
  • 如何禁止显示后续异常的父异常(原因)

    我知道raise from None并已阅读当我提出自己的异常作为响应时 如何更轻松地抑制以前的异常 https stackoverflow com questions 17091520 how can i more easily supp
  • 限制结果中的字段

    我正在使用 MongoDB v3 0 1 和 MongoDB Java 驱动程序 3 0 0 RC1 我有一个用户集合 其中包含 用户名 名字 姓氏 电子邮件 等字段 现在我想选择所有用户 但仅限于 用户名 名字 和 姓氏 字段 在 Mon
  • 如何在Windows Phone 7应用程序开发中动态显示图像?

    我想动态显示图像 即 如果每当单击特定图像更多 4 到 5 次 时 该图像就会消失 并且新图像可以填充此位置 我想在窗口中动态显示图像使用 silverlight 的电话 7 我知道这是一个很老的问题 但我有几分钟的空闲时间 每四次点击屏幕
  • 使用 Prism 更改 Xamarin Forms 中的页面过渡动画

    是否可以使用 Prism 的 INavigationService 更改 Xamarin Forms 中的页面过渡动画 我希望在 Android 上有淡入淡出动画 就像使用默认的 Xamarin Forms PushAsync PopAsy
  • 查询在 Oracle 11g 上有效,但在 Oracle 8i 上失败

    我在 Oracle 11g 中运行此查询没有问题 select case when seqnum 1 then 1 when seqnum cnt then 0 end as value1 case when seqnum 1 then t
  • Python 字符串格式化:填充负数

    我想将整数格式化为字符串 以便在没有符号的情况下 它们将被零填充以具有至少两位数字 例如我想要 1 1 10 10 to be 01 01 10 10 具体来说 我想要负数 3 和非负数 2 具有不同的最小字符串长度 简单的数字填充详情he
  • 子 span 元素脱离父元素,flexbox / margin - 填充问题

    我阅读了类似问题的帖子 但仍然无法使其正常工作 当有大文本时 我试图使用文本省略号 JSFiddle https jsfiddle net heyrohit bxrpduxu fixIssue align items center thum
  • 具有多个/许多伪选择器/匹配的本机 Javascript querySelectorAll()

    如何在本机 Javascript querySelectorAll 中放置许多伪选择器 示例 我想搜索 id 以 id starting 开头并以 id ending 结尾的元素 找不到现有问题 因此自己制作并回答 对于 Native Ja
  • 我应该如何排列这些“有用”的分数?

    在我网站上的用户生成的帖子下 我有一个类似亚马逊的评级系统 Was this review helpful to you Yes No 如果有投票 我会在该行上方显示结果 如下所示 5 of 8 people found this repl
  • C 中 DBL_EPSILON 和 Machine-Epsilon 的混淆

    Machine Epsilon 似乎有两个定义 将实数舍入到下一个浮点数时的最大相对误差 满足 1 0 machine eps 1 0 的最小正数 首先 我不明白这两者是如何关联的 根据我的理解 第二个 DBL EPSILON 不符合定义
  • 给定素数 N,计算下一个素数?

    一位同事刚刚告诉我 出于与哈希相关的神秘原因 C 字典集合按素数调整大小 我直接的问题是 它如何知道下一个素数是什么 它们是否记录一个巨大的表或动态计算 这是一个可怕的非确定性插入运行时间 导致调整大小 所以我的问题是 给定 N 质数 计算
  • 在 virtualenv 中执行 os.system('python ')

    我正在使用一个virtualenv要执行脚本 在这个脚本中我调用 os system python anotherScript py 我的问题是脚本是否在同一个中执行virtualenv作为调用者脚本 很难说 但是如果您在激活的 virtu
  • git - 樱桃挑选 - 如何/为什么

    问题 您想测试某人开发的功能 但它只是 存在于一个严重过时的远程分支中 Source http wiki koha community org wiki Using Git Cherry Pick cherry pick是如何解决这个问题的
  • 如何创建一个自动关闭的 HTML5 标签,例如
    [已关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我基本上想制作一个不需要关闭的自定义标签并将CSS应用于它 它不应该看起来像这样
  • meanjs 如何实现管理仪表板

    Meanjs 使用 AngularJS 进行前端 MVC 并且是一个 SPA 应用程序 因此当管理仪表板与前端页面不同时 实现管理仪表板的最佳方法是什么 也许有两个接入点 我一直在寻找一种方法来实现这一目标 我在这里发布了我的搜索结果 首先
  • 我应该如何使用 pgAdmin 3 将数据从 CSV 导入到 Postgres 表中?

    我需要为此使用任何插件或库吗 我想先在本地系统上尝试这个 然后在 Heroku Postgresql 上做同样的事情 pgAdmin 从 1 16 开始就有用于数据导入的 GUI 您必须先创建表 然后才能轻松导入数据 只需右键单击表名称并单
  • 使用 Angular-DataTables 更新数据时会重置分页

    我们有一个使用 Angular DataTables 的 Web 表单 DataTables 1 10 10 Angular datatables v0 5 3 我们使用来自后端的 JSON 来提供数据 该表配置了分页 并且每 10 秒手动