Pagination example doesn't change the page URL

[tobireif]

When I go to http://angular-ui.github.io/bootstrap/#/pagination and open the Plunkr example, then view the content of the frame (in order to view the demo page itself), the URL of the page (eg http://run.plnkr.co/sfpGiAuFnlMXxoMJ/ ) doesn't get updated with each pagination step.

[pkozlowski-opensource]

@tobireif I'm not sure I understand you correctly: would you expect a pagination directive to change the URL of an AngularJS application? As it definitively wasn't designed for this, it is a general-purpose pagination that can be used with different result sets and execute different actions when a given item in a pagination is selected.

Could you be more precise?

[tobireif]

Yes I would expect the directive to change the URL each time the displayed content of the page changes (at least as an option to set eg when the changing content is a major part of the page content), but it's OK if this one doesn't - I could add that functionality myself.

Feel free to close.

[ciekawy]

+1

[lgt]

Hi @ tobireif can you provide an example how did u made paginations URL change?

[yidongnan]

@tobireif can you provide an example how did u made paginations URL change?

[nicolasgarnil]

+1

Although this can be implemented easily it would be great to have it as an option.

<pagination items-per-page="15" max-size="5" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>

.controller('SamplesIndexCtrl', ['$scope', '$location', '$http', '$routeParams',
  function($scope, $location, $http, $routeParams) {

    $scope.search = function() {
      $http.get('/search', { page: $routeParams.page }).then(function(response) {
        $scope.samples = response.data.samples;
      });
    };

    $scope.search();

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

[tsikov]

@nicolasgarnil Are you sure your solution works? I figured out exactly the same solution, but every time I envoke pageChanged() the app controller reloads quickly twice. The first time with the new page and the second time with page 1. The urls are like so:

/#/foo/2
/#/foo/1

I believe the is because the pagination directive sets currentPage to 1 by default. Is it possible to turn this off?

[diogenesgg]

@tsikov Exact same issue with me!
I noticed when I initialize the current page with a number different from 1, it raises a page change event.

[diogenesgg]

Guys, problem solved!

For changing the url, you need to listen the ng-change pagination directive and call $location.search({pag: $scope.currentPage});

My problem:
I wasn't able to set the $scope.currentPage into the controller initialization. If I manged to set it, I could use this value into the controller upfront expressions, but this value wouldn't get loaded into my html template that contained the pagination directive. And as a side effect, the pageChange (ng-change) would get called if the currentPage was different from 1, causing the controller to reload twice.

My workaround was to set $scope.currentPage into my list items success function. So, I didn't need to set the currentPage into the controller initialization.

[KieranDotCo]

@diogenesgg currently having this issue at present would you be able to display an example of how you got around this?

[KieranDotCo]

@diogenesgg never mind managed to get it working.

I wrap my pagination in a div with an ng-if to only load pagination once my array loads like so

<div ng-if="items.length > 0">
      <pagination ng-model="page" ng-change="pageChanged()"></pagination>
</div>

This causes my ng-change not to fire twice as by the time the pagination is loaded my model item page has a value, hope this helps someone else.

[ghost]

here is my clumsy code:

  .controller(    'BlabalCtrl',
        ..........
        function getPageFromHashString(hash){
            if (!hash){
                return 1;
            }else if (hash.indexOf('page=') <0){
                return 1;
            }else{
                return hash.substring(5, hash.length);
            }

        }



        $scope.pageChanged = function (currentPage) {
            $scope.currentPage = currentPage;
            $scope.loadItems(currentPage);
            $location.hash('page='+currentPage);
        };


        $scope.$on('$locationChangeSuccess', function (e, newUrl, oldUrl) {
            if (newUrl== null || oldUrl == null || newUrl==oldUrl)
                    return;
            var page = getPageFromHashString($location.hash());
            if (page == $scope.currentPage)
                return;
            else{
                $scope.pageChanged(page);
            }
        });

        // back from other screen
        $scope.currentPage = getPageFromHashString($location.hash());

It supports browser's back/forward.

[neminsuksen]

Thanks KieranDotCo, It work for me.

[mmileon]

hi KieranDotCo, Thanks :) its for me

[JoeyKo]

With ui-router, using $stateParams instead of $routeParams