How to do paging in AngularJS?

后端 未结 21 1905
轮回少年
轮回少年 2020-11-22 07:17

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

相关标签:
21条回答
  • 2020-11-22 08:05

    Below solution quite simple.

    <pagination  
            total-items="totalItems" 
            items-per-page= "itemsPerPage"
            ng-model="currentPage" 
            class="pagination-sm">
    </pagination>
    
    <tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> 
    

    Here is sample jsfiddle

    0 讨论(0)
  • 2020-11-22 08:05

    The jQuery Mobile angular adapter has a paging filter you could base off of.

    Here's a demo fiddle that uses it (add more than 5 items and it becomes paged): http://jsfiddle.net/tigbro/Du2DY/

    Here's the source: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

    0 讨论(0)
  • 2020-11-22 08:06

    I've had to implement pagination quite a few times with Angular, and it was always a bit of a pain for something that I felt could be simplified. I've used some of the ideas presented here and elsewhere to make a pagination module that makes pagination as simple as:

    <ul>
        <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
    </ul>
    
    // then somewhere else on the page ....
    
    <dir-pagination-controls></dir-pagination-controls>
    

    That's it. It has the following features:

    • No custom code needed in your controller to tie the collection items to the pagination links.
    • You aren't bound to using a table or gridview - you can paginate anything you can ng-repeat!
    • Delegates to ng-repeat, so you can use any expression that could be validly used in an ng-repeat, including filtering, ordering etc.
    • Works across controllers - the pagination-controls directive does not need to know anything about the context in which the paginate directive is called.

    Demo : http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

    For those who are looking for a "plug and play" solution, I think you'll find this useful.

    Code

    The code is available here on GitHub and includes a pretty good set of tests:

    https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

    If you are interested I also wrote a short piece with a little more insight into the design of the module: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

    0 讨论(0)
提交回复
热议问题