Server side pagination with Angular datatable
Posted By : Monu Thakur | 09-Jan-2017
We have use three main js libs
angular.js angular-resource.js angular-datatables.js
First we have to create app and controller
This is my app
var app = angular.module('App');
Second one is controller
(function () { 'use strict'; angular .module('App') .controller('', ); .$injector = ['$scope', 'myService', 'DTOptionsBuilder', 'DTColumnBuilder']; function ($scope,myService, DTOptionsBuilder, DTColumnBuilder) { var vm = this; $scope.pageData = { total:0, }; // this function used to get all leads var get = function(sSource, aoData, fnCallback, oSettings){ var draw = aoData[0].value; var order = aoData[2].value; var start = aoData[3].value; var length = aoData[4].value; var params = { start:start, limit:length, } myService.get(params).$promise.then(function(response){ var records = { 'draw': 0, 'recordsTotal': 0, 'recordsFiltered': 0, 'data': [] }; if(response.data){ records = { 'draw': draw, 'recordsTotal': response.data.total, 'recordsFiltered':response.data.total, 'data': response.data.items }; } $scope.pageData.total= response.data.total; fnCallback(records); }); } function rowCallback (nRow, aData, iDisplayIndex, iDisplayIndexFull) { $compile(nRow)($scope); } vm.dtOptions = DTOptionsBuilder.newOptions() .withFnServerData(get) // method name server call .withDataProp('data')// parameter name of list use in getLeads Fuction .withOption('processing', true) // required .withOption('serverSide', true)// required .withOption('paging', true)// required .withPaginationType('full_numbers') .withDisplayLength(10) .withOption('rowCallback', rowCallback) .withDOM('lrtip'); vm.dtColumns = [ DTColumnBuilder.newColumn('firstName', 'First name').withOption('defaultContent', ""), DTColumnBuilder.newColumn('lastName', 'Last name').withOption('defaultContent', ""), DTColumnBuilder.newColumn('companyName', 'Company Name').withOption('defaultContent', ""), ]; } // function ends })();
This is service in my controller for hitting rest api and get data form server side this server is also injected in my controller
app.factory('myService',['$resource',function($resource){ var service = $resource('/API/V1', {}, { get: { url: 'URL', method: 'GET', } }); return service; }]);
This is table tag in my html and we use dt-options and dt-columns feature form datatable.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.