Can anyone help me adding some loading bar while datatable is getting data from the database? This is my code. what should I need to add for the progressbar will start loading while getting data then progress bar will remove after all data has been loaded to the data table.
var msgTemp = angular.module("tableLOVApp", ['datatables', 'ngResource', 'datatables.bootstrap','ui.bootstrap'])
.controller('tableLOVCtrl', tableLOVCtrl);
tableLOVCtrl.$inject = ['$scope', '$resource', '$http', '$compile', '$timeout', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTColumnDefBuilder'];
function tableLOVCtrl($scope, $resource, $http, $compile, $timeout, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder){
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url : 'msgTemplate/msgTemplateList.json',
type : 'GET',
data : function(d){
d.sortColumn = d.columns[d.order[0].column].data;
d.order = d.order[0].dir;
d.filter = d.search.value;
}
})
.withOption('createdRow', function(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withDataProp(function(json){
json.recordsTotal = json.data.length == 0 ? 0 : json.data[0].count;
json.recordsFiltered = json.data.length == 0 ? 0 : json.data[0].count;
return json.data;
})
/*.withOption('language',{loadingRecords: "Please wait - loading..."})*/
.withOption('fnRowCallback', rowCallback)
.withOption('serverSide', true)
.withOption('processing', true)
.withDisplayLength(10)
.withOption('scrollY', '362px')
.withBootstrap()
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('messageCd').withTitle('Message Code'),
DTColumnBuilder.newColumn('keyword').withTitle('Keyword'),
DTColumnBuilder.newColumn('messageType').withTitle('Message Type')
];<div ng-app="tableLOVApp" ng-controller="tableLOVCtrl as showCase">
<div>
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table row-border hover"></table>
</div>
</div>
