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

时间:2019-02-09 07:38:40

标签: javascript angularjs datatables mean-stack

我尝试将数据表用于实时数据,但是我的问题是,每次数据更新时,我都无法使用搜索,而每次使用分页时,它都返回到第一页。有人可以知道哪种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>

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

启用状态保存和覆盖状态保存/加载处理程序以仅使用表的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 ) )
    }
} );