Angular Datatable Server Side分页过滤,totalrecords,数据未定义

时间:2016-05-25 22:01:38

标签: angularjs angular-datatables

我正在尝试实现Angular Datatable Server端分页,但是我收到以下错误:

TypeError: Cannot read property 'length' of undefined

当我在工厂控制结果时,所有89条记录都存在,当涉及到控制器时我在中控制结果 filterService.execute 显示所有记录。但当我控制记录实际上确定“drwa,totalrecords,filteredrecords和data”时,除了绘制之外,一切都是未定义的。像这样:

Object {draw: 1, recordsTotal: undefined, recordsFiltered: undefined, data: undefined}

任何人都可以请一看,告诉我这是什么我在这里做错了,任何帮助都会提前得到赞赏。感谢

控制器:

angular.module('withServerSide', ['datatables'])
.controller('withServerSideController', function WithPromiseController($scope, DTOptionsBuilder, DTColumnBuilder, filterService)
{
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('es_officer_id', 'Id'),
        DTColumnBuilder.newColumn('es_officer_name', 'Name')
    ];

    $scope.dtOptions = DTOptionsBuilder
        .newOptions()
        .withFnServerData(serverData)
        .withDataProp('es_officers') //Tried 'data' as well
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('paging', true)
        // .withOption('rowCallback', rowCallback)
        .withPaginationType('numbers')
        .withDisplayLength(10)
        .withDOM('<"top">t<i"bottom"p><"clear">');

    function serverData(sSource, aoData, fnCallback, oSettings) {

        //All the parameters you need is in the aoData variable
        var draw = aoData[0].value;
        var order = aoData[2].value;
        var start = aoData[3].value;
        var length = aoData[4].value;

        //Then just call your service to get the records from server side
        filterService.execute(start, length, order).then(function(result){

            console.log(result);
            var records = {
                    'draw': draw,
                    'recordsTotal': result.total,
                    'recordsFiltered': result.filtered,
                    'data': result.records  
                };
            fnCallback(records);
        });
    }
});

filterService Factory:

angular.module('Main_Module').factory('filterService', filterService);
filterService.$inject = ['$q', '$http']
function filterService($q, $http)
{
    var service = {
    execute: execute
    };

    return service;

        function execute(start, length, order)
        {
            var defered = $q.defer();
            //Make a request to backend api and then call defered.resolve(result);
            $http({ 
                url   : 'http://localhost:3000/api/SELECTSpecific/es_officers',
                method: 'GET'
            })
            .then(function successCallback (result) 
            {   
                console.log(result);
                defered.resolve(result);
            });
            return defered.promise;
        }
};

HTML:

<div ng-controller="withServerSideController">
<table class="table table-striped table-bordered" align="center" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
</table>

1 个答案:

答案 0 :(得分:0)

好的,所以我自己已经弄清楚它将来对其他人有用,我在调用我的网址而不是发送适当的参数时犯了一个错误。

我打电话的是:

$http({ 
       url   : 'http://localhost:3000/api/SELECTSpecific/es_officers',
       method: 'GET'
     })

我应该做的是:

$http({ 
     url   : 'http://localhost:3000/api/SELECTQPromise/es_officers/'+start+'/'+limit+'/'+order+'/'+search,
     method: 'GET'
     })

<强>解决方案:

我意识到我甚至没有发送开始,限制,顺序,搜索等参数