jquery datatable pagination on server side with angular 8 code example

Example: angularjs datatable example with pagination

(function(window, angular, undefined) {
 'use strict';
 angular.module('testApp').controller('listCtrl', listCtrl);
 listCtrl.$inject = ['$scope', '$stateParams', '$state', 'growl', 'httpSvc', 'DTOptionsBuilder', 'DTColumnBuilder', '$compile']; //controller fro jenkinsui dashboard widgets   
 listCtrl($scope, $stateParams, $state, growl, DTOptionsBuilder, DTColumnBuilder, $compile) {
  $scope.pc = {};
  $scope.pc.dtInstance = {};
  $scope.instances = [];
  $scope.pc.dtColumns = [
   DTColumnBuilder.newColumn("name").withTitle('Name'),
   DTColumnBuilder.newColumn("type").withTitle('Type'),
   DTColumnBuilder.newColumn("age").withTitle('Age'),
   DTColumnBuilder.newColumn("updated_by").withTitle('Updated By'),
   DTColumnBuilder.newColumn("status").withTitle('Status').renderWith(statusHtml),
   DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
   .renderWith(actionsHtml)
  ]
  $scope.pc.dtOptions = DTOptionsBuilder.newOptions()
   .withOption('ajax', function(data, callback, settings) { // make an ajax request using data.start and data.length            .
    getListing(data).success(function(res) {
     // map your server's response to the DataTables format and pass it to                // DataTables' callback                
     callback({
      recordsTotal: res.results.recordsTotal,
      recordsFiltered: res.results.recordsFiltered,
      data: res.results.data
     });
    });
   })
   .withDataProp('data')
   .withDOM('lBfrtip')
   .withOption('processing', false) //for show progress bar        
   .withOption('serverSide', true) // for server side processing        
   .withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers        
   .withDisplayLength(2) // Page size        
   .withOption('lengthMenu', [2, 4, 6, 10])
   .withOption('aaSorting', [0, 'asc']) // for default sorting column // here 0 means first column        
   .withOption('createdRow', function(row) { // Recompiling so we can bind Angular directive to the DT            
    $compile(angular.element(row).contents())($scope);
   })
   .withButtons([{
     extend: 'copy',
     text: '<i class="fa fa-files-o"></i> Copy',
     titleAttr: 'Copy'
    },
    {
     extend: 'print',
     text: '<i class="fa fa-print" aria-hidden="true"></i> Print',
     titleAttr: 'Print'
    },
    {
     extend: 'excel',
     text: '<i class="fa fa-file-text-o"></i> Excel',
     titleAttr: 'Excel'
    },
    {
     extend: "csvHtml5"
    }
   ]);
 
  function actionsHtml(data, type, full, meta) {
   //console.log(data);                
   return '<button class="btn btn-warning" ng-click="editItem(\'' + data.name + '\');">' + '<i class="fa fa-edit"></i>' + '</button> ' + '<button class="btn btn-danger" ng-click="deleteItem();">' + '<i class="fa fa-trash-o"></i>' + '</button>';
  }
 
  function statusHtml(data, type, full, meta) {
   console.log(full.id);
   var activeClass = data == 'running' ? 'badge-warning' : data == 'success' ? 'badge-green' : 'badge-danger';
   return '<button class="btn badge ' + activeClass + '" ng-click="getStatusRequest(\'' + full.name + ',' + full.type + ',' + full.status + '\');">' + data + '</button>';
  }
  $scope.editItem = function(name) {
   console.log(name);
  }
  $scope.deleteItem = function(name) {
   console.log(11);
  }
  fucntion getListing() {
   return $http({
    method: 'POST',
    url: '/listing',
    data: ''
   })
  }
 }
})(window, window.angular);