How Create Pagination with Angular.js and UI Bootstrap

Question

Currently I implement a simple pagination with Angular.js and UIBootstrap but single show the first page u.u I have the next code:

Index.html

<div class="box-body table-responsive no-padding">
              <table class="table table-hover" ng-controller="IndexCtrl">
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Level</th>
                  <th>Actions</th>
                </tr>
                <tr ng-repeat="user in users| filter:search |startFrom:(currentPage - 1) * pageSize|limitTo: pageSize">
                  <td>@{{ user.name }}</td>
                  <td>@{{ user.email }}</td>
                  <td><span class="label label-success">@{{ user.level.permission }}</span></td>
                  <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                </tr>

              </table>
            </div><!-- /.box-body -->
            <uib-pagination total-items="users.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
           </uib-pagination>

Controller:

var Suap = angular.module('Suap', ['ui.bootstrap']);

 Suap.filter('startFrom',function(){
   return function(data, start){
    return data.slice(start);
 }
})
 .controller('IndexCtrl', function($scope, $http){
  $scope.users = [],
  $scope.pageSize=5,
  $scope.currentPage=1;


  $http({
    method: 'GET',
    url: '/route'
  }).then(function(response) {
     $scope.users = response.data;
  }); 
})

Thanks :D

How can show all pages, because single show 1 but exist more — Lagul
– Lagul, Commented Nov 2, 2015 at 0:16
can you please check my question here? stackoverflow.com/questions/43546340/… — Ne AS
– Ne AS, Commented Apr 21, 2017 at 17:29

charlietfl · Accepted Answer · 2015-11-02 00:43:14Z

5

Your pager is outside of the controller scope since you only set the controller on the <table>

You need to move ng-controller higher up to an element that includes both your box-body element and the <uib-pagination> element

answered Nov 2, 2015 at 0:43

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

2 Comments

charlietfl Over a year ago

also might want to pass the filtered array alias to pager so you don't have more pages showing than the filtered array contains

Ne AS Over a year ago

can you please check my question here stackoverflow.com/questions/43546340/… ?

bikashfullstack · Accepted Answer · 2016-09-15 11:27:50Z

0

You need to bind all the page numbers to uib-pagination. For this create a function inside the controller and set the scope of current page value dynamically from the function. Also you need to put the ng-controller directive to root element in order to get the pagination

answered Sep 15, 2016 at 11:27

bikashfullstack

1653 silver badges10 bronze badges

1 Comment

Ne AS Over a year ago

can you please check my question here stackoverflow.com/questions/43546340/… ?

Collectives™ on Stack Overflow

How Create Pagination with Angular.js and UI Bootstrap

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related