Angular-ui/bootstrap: pagination not rendered (missing styles?)

Question

I'm new to angular-ui and playing with it. I'm trying to use the pagination directive (http://angular-ui.github.io/bootstrap/#/pagination), but it seems I'm missing some styles as I just see the unordered list rendered, rather than the expected pager UI. I included the following resources, in this order:

1) the latest (RC) bootstrap CSS: http://blog.netdna.com/opensource/bootstrapcdn/bootstrapcdn-now-serving-3-0-0-rc1/

2) angular JS: http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js

3) angular-ui/bootstrap: I include from https://github.com/angular-ui/bootstrap/tree/gh-pages the file ui-bootstrap-tpls-0.4.0.js

My HTML sample body:

<body ng-app="Test">
<div ng-controller="PaginationDemoCtrl" class="well well-small">
    <pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="'&lsaquo;'" next-text="'&rsaquo;'" first-text="'&laquo;'" last-text="'&raquo;'"></pagination>
</div>
<script>
var PaginationDemoCtrl = function ($scope) {
  $scope.noOfPages = 7;
  $scope.currentPage = 4;
  $scope.maxSize = 5;  
  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };
};
var app = angular.module("Test", ["ui.bootstrap"]);
</script>
</body>

Rob · Accepted Answer · 2018-03-16 04:42:39Z

8

I was able to fix styling by following quick source code change:

in your ui-bootstrap file (mine was named ui-bootstrap-tpls-0.6.0.min.js) find following text:

<div class="pagination"><ul>

and then add class="pagination" to <ul> so it looks like this

<div class="pagination"><ul class="pagination">

edited Mar 16, 2018 at 4:42

Rob♦

27.5k16 gold badges89 silver badges103 bronze badges

answered Oct 17, 2013 at 14:44

Valera

66910 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikola M. Over a year ago

It worked for me also. For non minimized variant of ui-bootstrap (ui-bootstrap-tpls-0.6.0.js), search pattern should be <div class=\"pagination\">

CroMagnon · Accepted Answer · 2019-08-06 11:33:03Z

7

I had an issue with pagination when I updated my angular-bootstrap version. It seems that they have changed the way we should use the directive.

before

<uib-pagination
    total-items="pagination.total_entries"
    ng-model="pagination.current_page"
    ng-change="pageChanged()">
</uib-pagination>

after

<ul uib-pagination
    total-items="pagination.total_entries"
    ng-model="pagination.current_page"
    ng-change="pageChanged()">
</ul>

edited Aug 6, 2019 at 11:33

CroMagnon

1,2047 gold badges21 silver badges32 bronze badges

answered Jan 24, 2017 at 7:09

Nirav Gandhi

1,9951 gold badge25 silver badges32 bronze badges

1 Comment

Muckee Over a year ago

I had never used angular or asp.net before. Now following a tutorial and ran into this problem. It wasn't until after I realised that the angular github pagination entry was different tht I saw your solution, but I was still doubtful that converting to <ul> was the fix, so you get my upvote for clarifying. Another problem though.. my styles are broken! It just displays a working pagination list, but in plain text without any of the borders or positioning. Have you found a fix for this? TIA!

Eli Albért · Accepted Answer · 2013-08-01 21:26:18Z

5

It's not your fault. Turns out angular UI is not 100% compatible with bootstrap 3 just yet. Most things work, but you can see the status in this issue: Support bootstrap 3.0. I don't have the time to dive into this particular issue right now, but since all the styles are missing rather than some slightly broken thing, and all the functionality is fine, I bet it's an easy fix (renaming a class, etc). Meanwhile, you should either:

Switch to old boostrap
Write it yourself
Use the <pager> with new boostrap - I just tested it, and it works fine. So instead of <pagination> you want <pager>. A few fewer buttons but works for my purposes.

For instance:

<pager num-pages="numPages()" current-page="currentPage"></pager>

Hope that helps!

answered Aug 1, 2013 at 21:26

Eli Albért

7061 gold badge6 silver badges16 bronze badges

3 Comments

Naftis Over a year ago

Thank you, this is encouraging for a noob :) Anyway, given that I'm starting a brand-new app using these techs I think it would be more future-savy to go for the latest version. Meantime, I'll do "manual" paging or try debugging the issue in the source (of course, we'll be happy if anyone already has suggestions on this:). Just to test, I tried replacing the 3.0 RC CSS with the older version at href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css and it worked fine, but in my full app using 3.0 I fear this would not be so easy.

Naftis Over a year ago

To whom may be interested, I applied a hack to be able to wait for a fix in the libs: I just pasted in my CSS the bootstrap CSS styles starting with .pagination, adding to each selector an ul, like ".pagination ul ...". As the generated HTML produces a div.pagination including an ul (which for some reason does not receive the pagination class), this is a quick (and dirty) fix.

Eli Albért Over a year ago

awesome - I figured it was pretty simple.

mlim1972 · Accepted Answer · 2013-09-20 21:08:54Z

2

I have the same issue and I changed the template to address the changes in Bootstrap 3:

angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/pagination/pagination.html",
    "<ul class=\"pagination\">\n" +
    "  <li ng-repeat=\"page in pages\" ng-class=\"{active: page.active, disabled: page.disabled}\"><a ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" +
    "</ul>\n" +
    "");
}]);

Just add the above wherever you created your modules.

answered Sep 20, 2013 at 21:08

mlim1972

2481 gold badge3 silver badges9 bronze badges

Comments

Gwenc37 · Accepted Answer · 2014-05-26 08:46:24Z

1

I've run into the same situation, but none of the above helped for me. The main problem was:

ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates) required by the js. If you only included ui-bootstrap.min.js, you will also need to provide your own html templates.

So dont use both of them, ui-bootstrap-tpls.min.js is enough.

edited May 26, 2014 at 8:46

Gwenc37

2,0467 gold badges19 silver badges22 bronze badges

answered May 26, 2014 at 8:27

Devlix

112 bronze badges

Comments

Lord Darth Vader · Accepted Answer · 2018-03-16 14:12:32Z

I ran into this problem using Bootstrap v4.0.0-beta.3 and angular-ui-bootstrap 2.5.0

I fixed it by changing the ui-bootstrap-tpls.js pagination.html template to the following angular.module("uib/template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("uib/template/pagination/pagination.html", "<li role=\"menuitem\" ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"page-item pagination-first\"><a href ng-click=\"selectPage(1, $event)\" ng-disabled=\"noPrevious()||ngDisabled\" class='page-link' uib-tabindex-toggle>{{::getText('first')}}</a></li>\n" + "<li role=\"menuitem\" ng-if=\"::directionLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"page-item pagination-prev\"><a href ng-click=\"selectPage(page - 1, $event)\" ng-disabled=\"noPrevious()||ngDisabled\" class='page-link' uib-tabindex-toggle>{{::getText('previous')}}</a></li>\n" + "<li role=\"menuitem\" ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active,disabled: ngDisabled&&!page.active}\" class=\"page-item pagination-page\"><a href ng-click=\"selectPage(page.number, $event)\" class='page-link' ng-disabled=\"ngDisabled&&!page.active\" uib-tabindex-toggle>{{page.text}}</a></li>\n" + "<li role=\"menuitem\" ng-if=\"::directionLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"page-item pagination-next\"><a href ng-click=\"selectPage(page + 1, $event)\" class='page-link' ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('next')}}</a></li>\n" + "<li role=\"menuitem\" ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"page-item pagination-last\"><a href ng-click=\"selectPage(totalPages, $event)\" class='page-link' ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('last')}}</a></li>\n" + ""); }]);

mariowise · Accepted Answer · 2016-02-12 14:01:04Z

0

I solve this by using this versions of angular@~1.4.8 and angular-bootstrap@~0.14.3

answered Feb 12, 2016 at 14:01

mariowise

2,3272 gold badges22 silver badges35 bronze badges

Comments

PK-1825 · Accepted Answer · 2018-03-16 04:29:28Z

var myApp = angular.module('myApp', ['ui.bootstrap'])
  
      .controller('employeeController', function ($scope) {
     
   var employees = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }];
      $scope.employees=employees;
      
       $scope.pageSize = 10;
                $scope.currentPage = 1;
                $scope.itemsPerPage = $scope.pageSize;
                $scope.maxSize = 5; //Number of pager buttons to show
                $scope.totalItems = $scope.employees.length;
                $scope.setPage = function (pageNo) {
                    $scope.currentPage = pageNo;
                };

                $scope.pageChanged = function () {
                    console.log('Page changed to: ' + $scope.currentPage);
                };

                $scope.setItemsPerPage = function (num) {
                    $scope.itemsPerPage = num;
                    $scope.currentPage = 1; //reset to first page
                }
      
})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
    <div ng-controller="employeeController">
        <div class="container" style="margin-top:40px;">
        <div style="text-align: center">
                                    <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
                                </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>City</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                        <tbody >
                            <tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-style="set_color(emp)">
                                <td>{{emp.Name}} </td>
                                <td>{{emp.City}}</td>
                                <td>{{emp.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="text-align: center">
                                    <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
                                </div>
        </div>
    </div>
</body>

Rob · Accepted Answer · 2018-03-16 04:42:02Z

0

The template:

<pagination total-items="totalCount"
            ng-model="currentPage"
            items-per-page="limit"
            max-size="maxSize"
            rotate="false"
            class="pagination-sm pull-right"
            next-text="&rsaquo;"
            previous-text="&lsaquo;"
            first-text="&laquo;"
            last-text="&raquo;"
            boundary-links="true"
            ng-change="user_list()">
</pagination>

And the javascript:

$scope.currentPage = 1;
$scope.limit = 100;
$scope.maxSize = 12;

edited Mar 16, 2018 at 4:42

Rob♦

27.5k16 gold badges89 silver badges103 bronze badges

answered Mar 16, 2018 at 4:41

akash desai

113 bronze badges

Collectives™ on Stack Overflow

Angular-ui/bootstrap: pagination not rendered (missing styles?)

9 Answers 9

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related