Angular JS datatable serverside script is not working

Question

Hi Iam using Angular JS with Node. When i use client side in angularjs datatable when huge no.of records are obtained [> 5000 records] the browser goes to unresponsive state. So i tried using server side scripting but when is use i get the following error in fire bug.

Scripts included. (its in Jade format) [To convert it into to HTML use HTML to jade converter]

---------------------------
script(src='https://code.jquery.com/jquery-2.1.4.min.js')
script(src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js")
script(src="/angular-datatables.min.js")

Table syntax used
---------------------------
table(datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover")


Controller Script
-----------------------
myApp.controller("manualReview", ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder', function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
           // Either you specify the AjaxDataProp here
           // dataSrc: 'data',
           url: '/api/List',
           type: 'GET',
           data : {'FirstName':'Mythili'}
       })
       // or here
       .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers');
       $scope.dtColumns = [
           DTColumnBuilder.newColumn('id').withTitle('ID'),
           DTColumnBuilder.newColumn('firstName').withTitle('First name'),
           DTColumnBuilder.newColumn('lastName').withTitle('Last name')
       ];
    }
}])

Error obtained in Fire bug
-------------------------------------
Error: e[j] is undefined V@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:64:393 xa@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:69:28 S/m/<@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:93:76 .each@https://code.jquery.com/jquery-2.1.4.min.js:2:2880 n.prototype.each@https://code.jquery.com/jquery-2.1.4.min.js:2:845 S/m@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:84:291 S/g.fn.DataTable@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:162:461 f@http://localhost:8080/angular-datatables.min.js:6:5949 g@http://localhost:8080/angular-datatables.min.js:6:6080 f@http://localhost:8080/angular-datatables.min.js:6:6591 i/<@http://localhost:8080/angular-datatables.min.js:6:1257 f/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:120:113 hf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:134:394 hf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:131:419 hf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:135:159 zc/d/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:19:315 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:39:17 zc/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:19:236 zc@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:20:30 Yd@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:18:342 @https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:289:159 n.Callbacks/j@https://code.jquery.com/jquery-2.1.4.min.js:2:26920 n.Callbacks/k.fireWith@https://code.jquery.com/jquery-2.1.4.min.js:2:27738 .ready@https://code.jquery.com/jquery-2.1.4.min.js:2:29530 I@https://code.jquery.com/jquery-2.1.4.min.js:2:29721


angular.min.js (line 108)
3

Error: p.nTHead is null S/m/<@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:85:134 .each@https://code.jquery.com/jquery-2.1.4.min.js:2:2880 n.prototype.each@https://code.jquery.com/jquery-2.1.4.min.js:2:845 S/m@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:84:291 S/g.fn.DataTable@https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js:162:461 f@http://localhost:8080/angular-datatables.min.js:6:5949 g@http://localhost:8080/angular-datatables.min.js:6:6080 i/</<@http://localhost:8080/angular-datatables.min.js:6:7293 f/r<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:147:369 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:43:49 Jf/l.defer/c<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:45:442 

Error: You cannot use server side processing along with the Angular renderer!
f@http://localhost:8080/angular-datatables.min.js:6:10623
i/<@http://localhost:8080/angular-datatables.min.js:6:1257
f/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:120:113
hf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:134:394
hf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:131:419
hf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:135:159
Jc[c]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js:251:468
n.event.dispatch@https://code.jquery.com/jquery-2.1.4.min.js:3:6414
n.event.add/r.handle@https://code.jquery.com/jquery-2.1.4.min.js:3:3224

Can any one help me resolving this issue.

Thanks in Advance Ram K

You cannot use serverside along with angular rendering (ng-repeat) nor promises. That is why the error is thrown. — davidkonrad, Nov 03 '15 at 12:22
If your data table has 5000 rows you might want to rethink your UI and use lazy loaded scrolling or pagination. No one looks at 5000 rows at once. — Nick Bailey, Nov 04 '15 at 01:22

Angular JS datatable serverside script is not working

0 Answers0