dmarsi dmarsi - 6 months ago 362
AngularJS Question

How to stay on current page after reloading using angularjs ui bootstrap pagination?

Below is my code for a simple pagination using angularjs-ui-bootstrap. Since I'll be working with too large of a data set to have it page client side I'm just grabbing the data per page when the page is changed.

The problem I'm running into is when the page is reloaded the pagination is always reset to the first page. How can I have it stay on the current page when the page is reloaded?

html

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination>


javascript

$scope.currentPage = $location.search().page;

getData($scope.currentPage);

$scope.pageChanged = function () {
getData($scope.currentPage);
$location.url('?page=' + $scope.currentPage);
};

function getData(pageNumber) {
if (pageNumber == null)
pageNumber = 1;
$http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber)
.success(function (data) {
$scope.teams = data.Teams;
$scope.totalCount = data.TotalCount;
}).error(function () {
alert("error");
});


This code currently adds a
?page={currentPage}
parameter to the url. When the page reloads it gets the saved page from
$location.search().page
goes into
getData()
with
$scope.currentPage
set to the correct page number. But then it goes into
pageChanged()
with
$scope.currentPage
reset back to
1
.

EDIT: Cookie approach

So I tried to save the currentPage in a cookie like this:

$scope.currentPage = $cookies.get('page');

getData($scope.currentPage);

$scope.pageChanged = function () {
getData($scope.currentPage);
$cookies.put('page', $scope.currentPage);
};


When the page reloads it gets the saved page from the cookie goes into
getData()
with
$scope.currentPage
set to the correct page number. But then it goes into
pageChanged()
with
$scope.currentPage
reset back to
1
. So the problem still happens.

EDIT 2:

Even when
$scope.currentPage
is hard coded to
2
when the page is reloaded
$scope.currentPage
is reset to
1
in
$scope.pageChanged
.

$scope.currentPage = 2;

getData($scope.currentPage);

$scope.pageChanged = function () {
getData($scope.currentPage);
};


FINAL EDIT:

Found a way to stay on the current page. Answer is below.

Answer

Figured out a way to stay on the current page after the page is reloaded:

html

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination>

javascript

    $scope.savedCurrentPage = $location.search().page;        
    $scope.currentPage = $scope.savedCurrentPage;

    if ($scope.currentPage == 1) {
        getData($scope.currentPage);
        $scope.savedCurrentPage = null;
    } 

    $scope.pageChanged = function () {
        //Since $scope.currentPage gets reset to 1 here, check if there is a savedCurrentPage.
        if ($scope.savedCurrentPage != null) {
            $scope.currentPage = $scope.savedCurrentPage;
            //Set it to null so it only happens when the page first loads.
            $scope.savedCurrentPage = null;
        }

        getData($scope.currentPage);
        $location.url('?page=' + $scope.currentPage);                
    };

    function getData(pageNumber) {        
        if (pageNumber == null)
            pageNumber = 1;
        $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber)
        .success(function (data) {
            $scope.teams = data.Teams;
            $scope.totalCount = data.TotalCount;
        })
        .error(function () {
            alert("error");
        });
    }