我正在尝试实现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>
答案 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'
})
<强>解决方案:强>
我意识到我甚至没有发送开始,限制,顺序,搜索等参数