Angular.ui Pagination Template

Question

I'm using AngularJS and Angular UI Bootstrap and i am trying to costumize the pagination.

On the documentation it is said that I can override the template for the component with a custom provided template.

However i don't know how the html template must be structured. I have tried to use a couple of templates that i found, but none of them quite worked out.

I need the pagination to look a little bit like this

Can someone exemplify how do i need to write this template?

Hi and welcome to stackoverflow. Can you provide a link to the mentioned documentation? Also, try to have a look on [this answer](https://stackoverflow.com/a/34133155/1719108). — Dejv, Dec 12 '18 at 19:53
Yes, this is the documentaion: http://angular-ui.github.io/bootstrap/#!#pagination And thanks for the link — Luiz Guilherme, Dec 12 '18 at 19:55

score 1 · Answer 1 · answered Dec 13 '18 at 09:50

1

First of all you can override the default template by using the template-url attribute and providing your custom template

template-url (Default: uib/template/pagination/pagination.html) - Override the template for the component with a custom provided template

Second, you can find all the templates in the Github page (you can see the default pagination template here). Copy it, change it to your needs and point the templateUrl towards it

answered Dec 13 '18 at 09:50

svarog

9,477
4
61
77

I was looking for the original pagination template link. Thanx for the link – Abdul Hameed Jan 22 '19 at 08:12

score 0 · Accepted Answer · answered Dec 12 '18 at 20:21

So, here is example:

  <div ng-controller="PaginationDemoCtrl">
    <table class="table">
      <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
        <td>{{row.name}}</td>
        <td>{{row.id}}</td>
      </tr>
    </table>
View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.

    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" max-size="2" class="pagination-sm" items-per-page="itemsPerPage"></pagination>
    <pre>The selected page no: {{currentPage}}</pre>
    <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

First, I changed in ui.bootstrap.js words "previous" and "next" to just for signs > and <, also i added style.css where I changed colors, I think my pagination looks similar to your picture. Here you can see everything, and you can make even more changes if you want:

plunker: http://next.plnkr.co/edit/bFMHzgCjVwK4YNPG?preview

Angular.ui Pagination Template

2 Answers2