I could use some assistance with implementing pagination for displaying data. However, I am encountering issues in retrieving the parameter in the Controller Method.
To provide more context, I have created a demo on CodePen which can be viewed at http://codepen.io/SmilePark/pen/vOVPXy
Below is a snippet of my view:
<div class="col-md-12">
<nav>
<ul class="pagination">
<li ng-class="{true:'active'}[currentPage==1]"><a href="javascript:void(0)" ng-click="currentPage=1;load()">Home Page</a></li>
<li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prev()">Prev</a></li>
<li ng-repeat="page in pages"><a href="javascript:void(0);" ng-click="currentPage=page;load()">{{ page }}</a></li>
<li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="next()">Next</a>
</li>
<li ng-class="{true:'active'}[currentPage==totalPage]"><a href="javascript:void(0)" ng-click="currentPage=totalPage;load()">Last Page</a></li>
</ul>
</nav>
</div>
Additionally, here is an excerpt from my controller:
userApp.controller('userCtrl', ['$scope', '$http', 'serverUrl', function($scope, $http, serverUrl) {
$scope.currentPage = 1;
$scope.currentCount = 3;
$scope.pages = [];
$http.get(serverUrl + "/users?page=" + $scope.currentPage + "&count=" + $scope.currentCount + "&mobile=&userId=0&status=1").success(function(data) {
if (data.code == 0) {
$scope.items = data.data.users;
$scope.totalPage = Math.ceil(data.numTotal / $scope.currentCount);
for(var i=1;i<$scope.totalPage+1;i++){
$scope.pages.push(i);
}
}
})
$scope.searchData = function() {
$scope.load();
}
$scope.load = function() {
var userId = 0,
mobile = "",
startDate = "",
endDate = "";
if ($scope.userId != undefined) {
userId = $scope.userId;
}
if ($scope.mobile != undefined) {
mobile = $scope.mobile;
}
if ($scope.startDate != undefined) {
startDate = new Date($scope.startDate).getTime();
}
if ($scope.endDate != undefined) {
endDate = new Date($scope.endDate).getTime();
}
var url = serverUrl + "/users?page=" + $scope.currentPage + "&count=" + $scope.currentCount + "&mobile=" + mobile + "&userId=" + userId + "&startDate=" + startDate + "&endDate=" + endDate + "&status=1";
$http.get(url).success(function(data) {
if (data.code == 0) {
$scope.items = data.data.users;
}
})
}
$scope.loadLast = function(){
$scope.currentPage = $scope.totalPage;
}
$scope.prev = function() {
$scope.currentPage--;
$scope.load();
}
$scope.next = function() {
$scope.currentPage++;
$scope.load();
}
Upon clicking the 'Last Page' button, I encounter an issue where $scope.currentPage becomes 'NaN'. Can anyone help troubleshoot this problem?