showing results for - "angularjs datatable example with pagination"
Lisette
04 Jan 2020
1(function(window, angular, undefined) {
2 'use strict';
3 angular.module('testApp').controller('listCtrl', listCtrl);
4 listCtrl.$inject = ['$scope', '$stateParams', '$state', 'growl', 'httpSvc', 'DTOptionsBuilder', 'DTColumnBuilder', '$compile']; //controller fro jenkinsui dashboard widgets   
5 listCtrl($scope, $stateParams, $state, growl, DTOptionsBuilder, DTColumnBuilder, $compile) {
6  $scope.pc = {};
7  $scope.pc.dtInstance = {};
8  $scope.instances = [];
9  $scope.pc.dtColumns = [
10   DTColumnBuilder.newColumn("name").withTitle('Name'),
11   DTColumnBuilder.newColumn("type").withTitle('Type'),
12   DTColumnBuilder.newColumn("age").withTitle('Age'),
13   DTColumnBuilder.newColumn("updated_by").withTitle('Updated By'),
14   DTColumnBuilder.newColumn("status").withTitle('Status').renderWith(statusHtml),
15   DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
16   .renderWith(actionsHtml)
17  ]
18  $scope.pc.dtOptions = DTOptionsBuilder.newOptions()
19   .withOption('ajax', function(data, callback, settings) { // make an ajax request using data.start and data.length            .
20    getListing(data).success(function(res) {
21     // map your server's response to the DataTables format and pass it to                // DataTables' callback                
22     callback({
23      recordsTotal: res.results.recordsTotal,
24      recordsFiltered: res.results.recordsFiltered,
25      data: res.results.data
26     });
27    });
28   })
29   .withDataProp('data')
30   .withDOM('lBfrtip')
31   .withOption('processing', false) //for show progress bar        
32   .withOption('serverSide', true) // for server side processing        
33   .withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers        
34   .withDisplayLength(2) // Page size        
35   .withOption('lengthMenu', [2, 4, 6, 10])
36   .withOption('aaSorting', [0, 'asc']) // for default sorting column // here 0 means first column        
37   .withOption('createdRow', function(row) { // Recompiling so we can bind Angular directive to the DT            
38    $compile(angular.element(row).contents())($scope);
39   })
40   .withButtons([{
41     extend: 'copy',
42     text: '<i class="fa fa-files-o"></i> Copy',
43     titleAttr: 'Copy'
44    },
45    {
46     extend: 'print',
47     text: '<i class="fa fa-print" aria-hidden="true"></i> Print',
48     titleAttr: 'Print'
49    },
50    {
51     extend: 'excel',
52     text: '<i class="fa fa-file-text-o"></i> Excel',
53     titleAttr: 'Excel'
54    },
55    {
56     extend: "csvHtml5"
57    }
58   ]);
59 
60  function actionsHtml(data, type, full, meta) {
61   //console.log(data);                
62   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>';
63  }
64 
65  function statusHtml(data, type, full, meta) {
66   console.log(full.id);
67   var activeClass = data == 'running' ? 'badge-warning' : data == 'success' ? 'badge-green' : 'badge-danger';
68   return '<button class="btn badge ' + activeClass + '" ng-click="getStatusRequest(\'' + full.name + ',' + full.type + ',' + full.status + '\');">' + data + '</button>';
69  }
70  $scope.editItem = function(name) {
71   console.log(name);
72  }
73  $scope.deleteItem = function(name) {
74   console.log(11);
75  }
76  fucntion getListing() {
77   return $http({
78    method: 'POST',
79    url: '/listing',
80    data: ''
81   })
82  }
83 }
84})(window, window.angular); 
85