本文介绍了使用Angular-DataTables更新数据时，寻呼将被重置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们有一个使用Angular DataTables（DataTable 1.10.10 / angular-datatables - v0.5.3）的Web表单。我们正在使用来自后端的JSON来提供数据。该表配置了分页，并且每10秒手动重新加载表的数据。这一切都正常，当我从第一个选择不同的页面，并且表被刷新，然后分页被重置。我尝试了不同的参数（）方法，但没有任何区别..非常感谢提前!!
我的HTML表：
< table datatable =ngid =datatable1dt-options =dtOptionsdt-column-defs =dtColumnDefsclass =表格条纹表盘 - dt-instance =dtInstance>
< trng-repeat =session.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（），
];
/ /获取原始请求参数
$ scope.dateData = JSON.parse（sessionsListDat a.config.data）;
var timer; //用于自动刷新
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（！$ scope.data.selectedAgent）{
$ scope.data.selectedAgent = $ scope.agentsList [0];
}
//格式数据
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 =数字（data.waitTime）.format（00:00:00）;
data.handleTime =数字（data.handleTime）.format（00:00:00）;
data.revenue = numbers（data.revenue）.format（$ 0,0.00）;
}
}
}
$ scope.data.serverData = serverData;
//这样做不会显示
if（$ scope.dtInstance.DataTable）{
$ scope.dtInstance.DataTable.draw（'full-hold'）;
}
};
var scheduleTimeout = function（）{
var getFreshDataInterval = 1000;
timer = $ timeout（getFreshData，getFreshDataInterval）;
};
//从服务器请求一组新的数据
var getFreshData = function（）{
if（$ scope.counter ++％10 == 0）{//请求到服务器将每10个请求（10秒）完成
var response = $ http（{
abp：true，
url：abp.appPath +Report / GetTeamSessionsByTimeInterval ，
方法：POST，
data：sessionsListData.config.data
}）然后（function（response）{
formatServerData（response.data）;
if（timer）{
scheduleTimeout（）;
}
}）;
}
else {
if（timer）{
scheduleTimeout（）;
}
}
};
//显示日期范围之间的currentdate
var isTodayInRage = function（currentdate）{
..
}
formatServerData （sessionsListData.data）;
if（isTodayInRage（userCurrentDate））{
//日期范围包括今天（本地时间）
scheduleTimeout（）;
}
$ scope.selectAgent = function（agent）{
$ scope.data.selectedAgent = agent;
};
$ scope。$ on（$ destroy，function（）{
if（timer）{
$ timeout.cancel（timer）;
}
}）;
}]）;
解决方案
启用或禁用状态保存。当启用aDataTables将存储分页位置，显示长度，过滤和排序等状态信息。当最终用户重新加载页面时，表的状态将被更改以匹配它们以前设置的状态。
use ==> .withOption（ 'stateSave'，false）//或true作为案例
示例
$ scope.dtOptions = DTOptionsBuilder.newOptions（）
.withOption（'stateSave'，false）
.withPaginationType（simple_numbers ）
.withDisplayLength（25）
.withOption（retrieve，true）
.withOption（'order'，[0，'desc']）;
了解更多阅读文档stateSave
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);
}
});
}]);
解决方案
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
这篇关于使用Angular-DataTables更新数据时，寻呼将被重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！