Angular-ui/bootstrap: pagination not rendered (missing styles?)
I was able to fix styling by following quick source code change:
in your ui-bootstrap file (mine was named ui-bootstrap-tpls-0.6.0.min.js) find following text:
<div class="pagination"><ul>
and then add class="pagination"
to <ul>
so it looks like this
<div class="pagination"><ul class="pagination">
I had an issue with pagination when I updated my angular-bootstrap version. It seems that they have changed the way we should use the directive.
before
<uib-pagination
total-items="pagination.total_entries"
ng-model="pagination.current_page"
ng-change="pageChanged()">
</uib-pagination>
after
<ul uib-pagination
total-items="pagination.total_entries"
ng-model="pagination.current_page"
ng-change="pageChanged()">
</ul>
It's not your fault. Turns out angular UI is not 100% compatible with bootstrap 3 just yet. Most things work, but you can see the status in this issue: Support bootstrap 3.0. I don't have the time to dive into this particular issue right now, but since all the styles are missing rather than some slightly broken thing, and all the functionality is fine, I bet it's an easy fix (renaming a class, etc). Meanwhile, you should either:
- Switch to old boostrap
- Write it yourself
- Use the
<pager>
with new boostrap - I just tested it, and it works fine. So instead of<pagination>
you want<pager>
. A few fewer buttons but works for my purposes.
For instance:
<pager num-pages="numPages()" current-page="currentPage"></pager>
Hope that helps!