Angularjs Datatable Server Side Pagination

This simple tutorial help to implement Datatable Server Side pagination using Angular js. We will use server-side pagination features in datatable using Ajax. This help to improve the performance of the application.

The server-side pagination is used to deal with huge amounts of data. The client-side pagination will take a long time to get all the data to the same time and render it into the HTML page, so it’s better to use a server call on every page request.

We’ll use HTTP rest to get data from the server, The rest API will use data size and array length to fetch the required amount of data.

Datatable Server Side Pagination Using Angularjs

I am assuming that you have created angularjs application, you just need to integrate datatable server-side pagination using AJAX. if you haven’t created a angular js application yet, Please create it by following the below tutorial –
Angular Datatable Integration

We’ll cover the following features in this tutorial –

• Integrate table Listing
• Default sorting column
• Getting Data using Ajax
• Page number configuration
• Column name configuration with custom name
• Display loader on processing data
• Enable server-side processing of data
• Integrate table Listing
• Added action button, Like print,copy and export to excel
• Created action button into table for edit and delete record
• Created custom render method to render a particular column

Let’s create index.html file and add the below code into the file –

<table class="table table-condensed table-striped table-hover table-bordered row-border hover" datatable="" dt-options="pc.dtoptions" dt-instance="pc.dtinstance" dt-columns="pc.dtcolumns" id="dt_pc"></table>

The above code are using pc.dtOptions for datatable option and pc.dtInstance for instance configuration. Let’s define these variable into the listCtrl.js file.

(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">&nbsp;Copy',
     titleAttr: 'Copy'
    },
    {
     extend: 'print',
     text: '<i class="fa fa-print" aria-hidden="true">&nbsp;Print',
     titleAttr: 'Print'
    },
    {
     extend: 'excel',
     text: '<i class="fa fa-file-text-o">&nbsp;Excel',
     titleAttr: 'Excel'
    },
    {
     extend: "csvHtml5"
    }
   ]);

  function actionsHtml(data, type, full, meta) {
   //console.log(data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   return '<button class="btn btn-warning" ng-click="edititem(\'' +="" data.name="" '\');"="">' + '<i class="fa fa-edit">' + '&nbsp;' + '<button class="btn btn-danger" ng-click="deleteitem();">' + '<i class="fa fa-trash-o">' + '';
  }

  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 + '';
  }
  $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); 
</button class="btn badge '></i class="fa fa-trash-o"></button class="btn btn-danger" ng-click="deleteitem();"></i class="fa fa-edit"></button class="btn btn-warning" ng-click="edititem(\''></i class="fa fa-file-text-o"></i class="fa fa-print" aria-hidden="true"></i class="fa fa-files-o">

I am using $http service to get results from server, The $http is a function that takes a single object type argument for configuration.It is used to generate an HTTP request and returns a promise that is resolved (request success) or rejected (request failure) with a response object.

I am returning simple result from rest API that’s why we have used callback() method to parse results as per datatable.

Whenever a user will click any page number, the rest api will be called and return desired results based on length and page number.

Summary

We have covered Ajax server-side pagination using AngularJS and rest API.we have set many properties of datatable as like PaginationType, DisplayLength, lengthMenu, sorting etc.