如何将ui.bootstrap.progressbar放入我的角度数据表ajax中

时间:2016-07-22 09:33:14

标签: angularjs ajax angular-datatables

当数据表从数据库获取数据时,有人可以帮我添加一些加载栏吗?这是我的代码。我需要为进度条添加什么才会在获取数据时开始加载,然后在将所有数据加载到数据表后,进度条将被删除。



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>
&#13;
&#13;
&#13;

This is what I want to do...

0 个答案:

没有答案