How to create pagination with angularjs with ngrepeat and bootstrap ui?

Question

What is the simpliest way to create pagination ? I'd liket to use ng-repeat where i go through the items list and every item has id and name attributes. The next code works for example 15 items and show 2 page but i'd like to show the first page the first 10 item and the other page shows the other items...and so on if i have a lot of items.

My code what i tried:

<table>
    <thead><th>id</th><th>name</th></thead>
    <tbody><tr ng-repeat="item in items">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
    </tr></tbody>
</table>
<uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
<script>
$scope.items = [] //here i have for example 15 items..it comes through rest
totalItems = $scope.items.length; //15
$scope.currentPage=1;//1. page
$scope.maxSize=4; //maximum 4 page show
</script>

Could someone helps to me? Thanks a lot!

Your question is not very clear. Are you trying to show a fixed number of items per page? Or are you dynamically trying to control the number of items per page? — Pratik Bhattacharya
– Pratik Bhattacharya, Commented Apr 21, 2016 at 17:40
the ui-bootstrap default is 10 per page so i just want to show in one page the first 10 item the second page the last 5....if 35 items comes: first page 10 second 10 third 10 and finally 5. — kissmark
– kissmark, Commented Apr 21, 2016 at 17:53
So i'd like to allow maximum 10 item per page, and do pagination when i have more than 10 item — kissmark
– kissmark, Commented Apr 21, 2016 at 17:57

Pratik Bhattacharya · Accepted Answer · 2016-04-21 18:18:41Z

You can take a look at the fiddler here. Basically I have created a custom filter which will take the current page number and page size as input and then slice out the items that needs to be shown in the UI.

Filter

myApp.filter('paginate', function() {
  return function(items, page, pageSize) {
    if (items === undefined || items === null)
      return [];
    if (pageSize === undefined || pageSize === null || pageSize < 0 || pageSize >= items.length)
      return items;
    var filtered = [];
    page = page - 1;
    console.log(page * pageSize + " " + parseInt((page * pageSize) + pageSize));
    filtered = items.slice(page * pageSize, parseInt((page * pageSize) + pageSize));
    return filtered;
  }
});

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="item in items | paginate: currentPage : pageSize">
    {{item}}
  </div>
  <input type="number" ng-model="currentPage" />
</div>

Devidas Kadam · Accepted Answer · 2016-04-21 17:18:42Z

1

use ui-bootstrap's pagination directive

answered Apr 21, 2016 at 17:18

Devidas Kadam

9549 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to create pagination with angularjs with ngrepeat and bootstrap ui?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related