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?
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: