【问题标题】:How invoke angular datatable pagination refresh callback after data update?数据更新后如何调用角度数据表分页刷新回调?
【发布时间】:2016-02-04 10:05:46
【问题描述】:

我有角度数据表配置,可以正常工作。我的配置看起来像

  vm.dtOptions = DTOptionsBuilder.newOptions().
            withPaginationType('full_numbers').
            //withOption('ajax', {
            //    url: 'rest/get/'+entityName,
            //    type: 'GET'
            //}).
            withOption('serverSide', true).
            withOption('ajax', function(data, callback, settings) {
                    EntityManager.get({entity:entityName,action:'get',start:data.start,length:data.length}).$promise.then(function(response) {
                    console.log('response');
                    console.log(response);
                    vm.objectList = response.data;

                    callback({
                        recordsTotal:    response.recordsTotal,
                        recordsFiltered: response.recordsFiltered,
                        data: response.data
                    });

                });
            }).
            withDataProp('data').
            withOption('processing', true).
            withOption('bFilter', false).
            withOption('bSort', false).
            withOption("aaSorting", []).
            withDisplayLength(10);

但我也有更新数据和recordsTotal 的过滤功能,因此,应该重新渲染分页 - 必须修改最后一个按钮编号。但它不会发生。有没有办法调用

 callback({
      recordsTotal:    response.recordsTotal,
      recordsFiltered: response.recordsFiltered,
      data: response.data
 });

来自控制器?什么对象和什么方法更新分页?

【问题讨论】:

    标签: javascript angularjs pagination angular-datatables


    【解决方案1】:

    好的,我终于找到了解决方案。首先,在标记中添加dt-instance:

     <div ng-controller="DataTableController as listTable" ng-init="init('informsystem')">
       <table datatable="" dt-options="listTable.dtOptions" dt-instance="listTable.dtInstance" class="row-border hover">
    

    在控制器中声明 dtInstance 变量并初始化它。此外,获取所有 ajax 回调逻辑以分离函数并将其传递到 dtoptions 和过滤器中:

     var vm = this;
     vm.dtInstance = {}; //MUST BE INITIALIZED! DON'T FORGET vm.(this) before varName
    
            var ajaxCallback = function(data, callback, settings) {
                $scope.filter.start = data.start;
                $scope.filter.length = data.length;
                console.log($scope.filter);
                EntityManager.get($scope.filter).$promise.then(function(response) {
                    console.log('response');
                    console.log(response);
                    vm.objectList = response.data;
    
                    callback({
                        recordsTotal:    response.recordsTotal,
                        recordsFiltered: response.recordsFiltered,
                        data: response.data
                    });
    
                });
            };
    

    在配置中使用 ajaxCallback:

       ....withOption('ajax', ajaxCallback ).....
    

    在doFilter/doSearch中:

      $scope.doFilter = function () {
                console.log(vm.dtInstance);
                vm.dtInstance.changeData(ajaxCallback);
            };
    

    $scope.filter 在 init 中填充了 $resource 的公共参数,并且在回调中添加了 start 和 length(偏移量)。此外,过滤器包含来自通过 ng-model 绑定的过滤器 html 输入的值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-02-24
      • 1970-01-01
      • 2017-11-05
      • 2016-07-25
      • 1970-01-01
      • 2019-04-09
      • 2018-03-24
      • 1970-01-01
      相关资源
      最近更新 更多