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);