How to generate links in Angular UI Bootstrap Pagination

Question

I have been continuing learning angular and have now used the angular ui bootstrap pagination successfully. I am able to display the list of items together with the correct number of pages. And also switch to the correct page whenever I click on the pagination.

Now my question is if a user wanted to bookmark a certain page, or to make sure the user stays on the same page whenever he refreshes the browser, how do I go about it. There are no links (href) being generated on the address bar of the browser. Do I also need to set routes? Can you please post some examples, as it would greatly help me. Thanks.

Answer 1

You need to set up routes, you can do it using routeProvider or ui router

In this example, I use route provider to demonstrate, but the idea is the same.

Here I set up a route with currentPage as parameter:

app.config(function($routeProvider) {
  $routeProvider
    .when('/page/:currentPage', {
        templateUrl: "template.html",
        controller: PaginationDemoCtrl
    })
});

In your controller, you can retrieve the current page from $routeParam :

$scope.currentPage = $routeParams.currentPage || 1; //default to 1 if the parameter is missing
//load your paged data from server here.

You could just $watch current page for changes and update the location accordingly:

$scope.$watch("currentPage",function(value){
     if (value){
        $location.path("/page/" + value);
     }
  })

Source code

DEMO link

With routing, you also need to update your code to load paged data from server. We don't load data immediately when the currentPage changes (in this case is the $watch function). We load our paged data when we retrieve the $routeParam.currentPage parameter.

As requested by @Harry, here is another solution to generate href links by overwriting bootstrap html template:

app.config(function($routeProvider) {
  $routeProvider
    .when('/page/:currentPage?', {
        templateUrl: "template.html",
        controller: PaginationDemoCtrl
    })
})
.run(["$templateCache","$rootScope","$location", function($templateCache,$rootScope,$location) {

  $rootScope.createPagingLink = function(pageNumber){
    return "#" + $location.path().replace(/([0-9])+/,pageNumber);
//Here is a sample function to build href paths. In your real app, you may need to improve this to deal with more case.
  }

  $templateCache.put("template/pagination/pagination.html",
    "<ul class=\"pagination\">\n" +
    "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(1)}}\">{{getText('first')}}</a></li>\n" +
    "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(page - 1)}}\">{{getText('previous')}}</a></li>\n" +
    "  <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a ng-href=\"{{$root.createPagingLink(page.number)}}\">{{page.text}}</a></li>\n" +
    "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(page + 1)}}\">{{getText('next')}}</a></li>\n" +
    "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(totalPages)}}\">{{getText('last')}}</a></li>\n" +
    "</ul>");
}]);

Source code

DEMO link

Answer 2

We can do this with the $location, without needing $route.

Here is an example of how to call the pagination from Angular UI Bootstrap:

<pagination ng-model="Controls.currentPage"
            total-items="Controls.totalItems"
            items-per-page="Controls.videosPerPage"
            max-size="5"
            rotate="false"
            boundary-links="true"
            ng-change="pageChanged()">
</pagination>

Inside the pageChanged() function, use the following to create a unique URL for your results page:

** My code is on Coffeescript, but the logic is simple and the code easy to adapt **

$location.search('page', $scope.Controls.currentPage)

And on your controller, use the following to check, when starting, if the URL parameter is there:

urlParams = $location.search()
if urlParams.page?
  $scope.Controls.currentPage = urlParams.page
else
  $scope.Controls.currentPage = 1

Answer 3

Yes, if you want your app to allow linking into certain states then you will have to have your app leverage the routeProvider.

The official docs don't have a great deal of information on routes but the tutorial has this page:

http://docs.angularjs.org/tutorial/step_07

Also John Lindquist's excellent short video tutorials are a must watch. One dealing with routes is:

http://www.egghead.io/video/gNtnxRzXj8s

Answer 4

Here the generic solution - the uibPagination directive decorator and the updated template:

angular.module('ui.bootstrap.pagination')
    .config(function($provide) {
        $provide.decorator('uibPaginationDirective', function($delegate, $templateCache) {
            var directive = $delegate[0];
            directive.scope.getPageHref = "&";
            $templateCache.put("uib/template/pagination/pagination.html",
                "<li ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"pagination-first\"><a ng-href=\"{{noPrevious() ? '' : getPageHref()(1)}}\" ng-disabled=\"noPrevious()||ngDisabled\" uib-tabindex-toggle>{{::getText('first')}}</a></li>\n" +
                "<li ng-if=\"::directionLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"pagination-prev\"><a ng-href=\"{{noPrevious() ? '' : getPageHref()(page - 1)}}\" ng-disabled=\"noPrevious()||ngDisabled\" uib-tabindex-toggle>{{::getText('previous')}}</a></li>\n" +
                "<li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active,disabled: ngDisabled&&!page.active}\" class=\"pagination-page\"><a ng-href=\"{{getPageHref()(page.number)}}\" ng-disabled=\"ngDisabled&&!page.active\" uib-tabindex-toggle>{{page.text}}</a></li>\n" +
                "<li ng-if=\"::directionLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"pagination-next\"><a ng-href=\"{{noNext() ? '' : getPageHref()(page + 1)}}\" ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('next')}}</a></li>\n" +
                "<li ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"pagination-last\"><a ng-href=\"{{noNext() ? '' : getPageHref()(totalPages)}}\"  ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('last')}}</a></li>\n" +
                "");
            return $delegate;
        });
    });

We decorate the directive with the getPageHref function passed from the outer scope which is used to construct the page links.

Usage:

<div ng-controller="ProductController">
    ...
    <ul uib-pagination
        total-items="totalItems"
        ng-model="page"
        get-page-href="getPageHref">
    </ul>
</div>

Now you have to define the getPageHref function in your outer scope:

angular.module('app')
.controller('ProductController', function($scope) {
    ...
    $scope.getPageHref = function(page) {
        return '#/products?page=' + page;
    };
});

Answer 5

Just to make code look better you can use template-url attribute on uib-pagination element to specify your new template url

I whould use ui-sref instead of using a function to generate the link .

and instead of reloading the controller for each page click pass a function for ng-click with $event so you could prevent the href from been executed with e.preventDefault() and calling your ajax before

<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a ui-sref="list({page: page.text})"  ng-click="$root.paginationClick(page.number,$event)">{{page.text}}</a></li>