Angular pagination with all posts display and smaller posts display
I am using AngularJS to display JSON data in table format. I have done with data. I also did pagination for data movement.
Here I have three links to configure data such as "Show all records", "Show 10 more records" and "Reset up to 10 records".
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>
+3
source to share
1 answer
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 = 10,$scope.maxSize = 1;
$scope.ShowAll=function(value){
if(value==0){
$scope.numPerPage = $scope.numPerPage+10;
$(".showreset").show();
}else if(value==1){
$scope.numPerPage = 10;
$(".showreset").hide();
}else if(value==2){
$scope.numPerPage = data.length;
$(".showreset").show();
}
};
$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:;" ng-click="ShowAll(0)" class="showmore">Show More per Page</a>
<a href="javascript:;" ng-click="ShowAll(1)" class="showreset">Reset to 10 per Page</a>
<a href="javascript:;" ng-click="ShowAll(2)" class="showall">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>
+3
source to share