用于分页和搜索实时数据的数据表？答案

【问题标题】：Datatable for pagination and searching for live data?用于分页和搜索实时数据的数据表？
【发布时间】：2019-02-09 07:38:40
【问题描述】：

我尝试使用数据表来获取实时数据，但我的问题是，每次我的数据更新时，我都无法使用搜索，而且每次使用分页时，它都会返回到第一页。有人可以知道哪个数据表插件与 angular 兼容吗？

这是我实时更新数据的代码：

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope','$interval', function($scope,$interval) {
  $interval(function () {
    $scope.register = {
      regData: {
        branch: {},
      },
      names: [
        {name:"narquois"},{name:"vorpal"},{name:"keen"},
        {name:"argol"},{name:"long"},{name:"propolis"},
        {name:"bees"},{name:"film"},{name:"dipsetic"},
        {name:"thirsty"},{name:"opacity"},{name:"simplex"},
        {name:"jurel"},{name:"coastal "},{name:"fish"},
        {name:"kraken"},{name:"woman"},{name:"limp"},
      ],
    };
    }, 1000);
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Name</th>
       </tr>
    </thead>			
    <tbody>
       <tr ng-repeat="person in register.names">
         <td align="center">{{ person.name }}</td>
       </tr>
    </tbody>
</table> 
</div>

【问题讨论】：

标签： javascript angularjs datatables mean-stack

【解决方案1】：

启用状态保存并覆盖状态保存/加载处理程序以仅使用表的 DOM id：

$('#example').dataTable( {
  stateSave: true,
  stateSaveCallback: function(settings,data) {
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
    },
  stateLoadCallback: function(settings) {
    return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
    }
} );

【讨论】：

【解决方案2】：

您必须使用选项stateSave 初始化您的DataTable。它使您能够在页面刷新时保持表格的分页、过滤值和排序。它使用 HTML5 的 API localStorage 和 sessionStorage。

$('#example').dataTable( {
    stateSave: true
});

【讨论】：