3
我正在使用AngularJS以表格格式显示JSON数据。我已经完成了取数据。我还实施了数据移动的分页。显示所有记录和显示更少记录的角度分页
在这里,我有三个链接的要调整,如 “显示所有记录”,数据 “显示10条记录” 和“重置为10条
的JavaScript:
var app = angular.module("MyApp",['ui.bootstrap']);
app.controller("MyController",function($scope,$http){
$http({method:"GET",url:'db.json'}).success(function(data,status,headers,config){
$scope.DBTotalData = data.length;
$scope.TotalPages='';
$scope.filteredapp = [],$scope.currentPage = 1,$scope.numPerPage = 5,$scope.maxSize = 1;
$scope.numPages = function() {
return Math.ceil(data.length/$scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.TotalPages=Math.ceil(parseInt(data.length,0)/parseInt($scope.numPerPage,0));
$scope.filteredapp = data.slice(begin, end);
$scope.DBData=$scope.filteredapp;
});
}).error(function(data,status,headers,config){
console.debug("error");
});
});
HTML :
<div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
<div class="rgDataShowCtrl">
<a href="javascript:;">Show 10 More Records</a>
<a href="javascript:;">Reset to 10 Records</a>
<a href="javascript:;">Show All Results</a> <div class="clear"></div></div>
<div class="clear"></div>
<tr ng-repeat="dData in DBData">
<td>{{dData.IaAcqNumber}}</td>
<td>{{dData.IaAssetNumber}}</td>
<td>{{dData.IaRepAssetNumber}}</td>
<td>{{dData.IaYearApp}}</td>
<td>{{dData.IaMake1}}</td>
<td>{{dData.IaModelRP}}</td>
<td>{{dData.IaOrganization}}</td>
<td>{{dData.IaDepartment}}</td>
<td>{{dData.IaTemplate}}</td>
</tr>