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

Question

我曾尝试使用数据表存储实时数据，但是我的问题是，每次数据更新时，我都无法使用搜索功能，而每次使用分页时，它都回到第一页。有人可以知道哪种datatable插件与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>

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

Answer 2

您必须使用选项stateSave初始化DataTable。它使您可以在页面刷新时保留页面的分页，过滤器值和排序。它使用HTML5的API localStorage和sessionStorage。

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