CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui
Naftis
Naftis

Reputation: 4559

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

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>

Upvotes: 6

Views: 17344

Answers (9)

Nirav Gandhi
Nirav Gandhi

Reputation: 2005

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>

Upvotes: 7

Lord Darth Vader
Lord Darth Vader

Reputation: 2005

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" + ""); }]);

Upvotes: 1

Valera
Valera

Reputation: 619

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">

Upvotes: 8

akash desai
akash desai

Reputation: 11

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;

Upvotes: 0

PK-1825
PK-1825

Reputation: 1489

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>

Upvotes: 0

mariowise
mariowise

Reputation: 2327

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

Upvotes: 0

Devlix
Devlix

Reputation: 11

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.

Upvotes: 1

mlim1972
mlim1972

Reputation: 248

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.

Upvotes: 2

Eli Alb&#233;rt
Eli Alb&#233;rt

Reputation: 706

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:

  1. Switch to old boostrap
  2. Write it yourself
  3. 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!

Upvotes: 5

Related Questions