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.


 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..