CODEWITHSUNDEEP
angularjspaginationangular-ui-bootstrapangular-ui-pagination
Luiz Guilherme
Luiz Guilherme

Reputation: 47

Angular.ui Pagination Template

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?

Upvotes: 3

Views: 1150

Answers (2)

svarog
svarog

Reputation: 9847

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

Upvotes: 1

BartoszTermena
BartoszTermena

Reputation: 1487

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

Upvotes: 0

Related Questions