HomeBlog
Angular.js Pagination with Bootstrap - 羡辙杂俎
2016.05.11 16:01:49
Angular.js Pagination with Bootstrap

This post introduces how to make a pagination component with Angular.js and Bootstrap.

The following shows an expected state of our pagination component.

which could be modeled into

The left part is for the starting pages, right for ending pages, and center for pages around current one.

For example, for the second page, page - 1 is the same as 1 and page is the same as 2, so we need to hide 1, 2, and ... in the left part.

In fact, this task is more difficult than one might imagine, since there are many possible situations of our pagination. And this post is going to talk about how to make it.

Controller

In Angular controller, we define the page data, which could be replaced by backend data.

angular.module('app')
    .controller('PageController', function() {
        var vm = this;
        vm.page = {
            page: 5,
            total: 20
        };
    });

HTML

In HTML, we use ng-if to hide unnecessary tags, and ng-class to add class conditionally.

<ul class="pagination">
    <li ng-class="{true:'disabled'}[vm.page.page === 1]">
        <a href="#">&laquo;</a>
    </li>
    <li ng-if="vm.page.page-1>1">
        <a href="#">1a</a>
    </li>
    <li ng-if="vm.page.page-1>2">
        <a href="#">2b</a>
    </li>

    <li ng-if="vm.page.page-1>2+1">
        <a>...</a>
    </li>
    <li ng-if="vm.page.page>1">
        <a href="#">c</a>
    </li>
    <li class="active">
        <a href="#">d</a>
    </li>
    <li ng-if="vm.page.page<vm.page.total">
        <a href="#">e</a>
    </li>
    <li ng-if="vm.page.page+1<vm.page.total-1-1">
        <a>...</a>
    </li>

    <li>
        <a href="#" ng-if="vm.page.page+1<vm.page.total-1">f</a>
    </li>
    <li>
        <a href="#" ng-if="vm.page.page+1<vm.page.total">g</a>
    </li>
    <li ng-class="{true:'disabled'}[vm.page.page === vm.page.total]">
        <a href="#">&raquo;</a>
    </li>
</ul>

I added abcd..g at the end for you to understand better.

Here is the pagination for varied pages.


微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

觉得博文很赞?来打赏一下我吧!——送羡辙一本书,让她写出更棒的作品!:heart_eyes:

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus