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

Question

我尝试使用数据表来获取实时数据，但我的问题是，每次我的数据更新时，我都无法使用搜索，而且每次我使用分页时，它都会返回到第一页。有人可以知道什么数据表插件与 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

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

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

Answer 2

启用状态保存并覆盖状态 save/load 处理程序以仅使用 table 的 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 ) )
    }
} );

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

Datatable for pagination and searching for live data?

javascript

datatables

angularjs

mean-stack