How to achieve pagination table layout with Angular js

Question

Let s say I receive an object literal with 15  objects and I need to display them in a nice layout  not all in a row   what is the most efficient method for controlling when the line should break page should end   Right now I m using ng-repeat on table row s  and the result is a long thin table with one column   Edit for clarification   Could have objects within objects more params   Here is my object    scope zones               name    Zone 1             activity    1              name    Zone 2             activity    1              name    Zone 3             activity    0              name    Zone 4             activity    0              name    Zone 5             activity    0              name    Zone 6             activity    0              name    Zone 7             activity    1              name    Zone 8             activity    0              name    Zone 9             activity    0              name    Zone 10             activity    0              name    Zone 11             activity    1              name    Zone 12             activity    1              name    Zone 13             activity    0              name    Zone 14             activity    0              name    Zone 15             activity    1

User · Answer

The best simple plug and play solution for pagination.

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

you would jus need to replace ng-repeat with custom directive.

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>

Within the page u just need to add

<div align="center">
       <dir-pagination-controls
            max-size="100"
            direction-links="true"
            boundary-links="true" >
       </dir-pagination-controls>
</div>

In your index.html load

<script src="./js/dirPagination.js"></script>

In your module just add dependencies

angular.module('userApp',['angularUtils.directives.dirPagination']);

and thats all needed for pagination.

Might be helpful for someone.

User · Answer

Table with papging  sort and filter     Refer full example at Angularjs table sorting filter and paging

User · Answer

Here is my solution   Maxim Shoustin s solution has some issue with sorting  I also wrap the whole thing to a directive  The only dependency is UI Bootstrap pagination  which did a great job on pagination   Here is the plunker  Here is the github source code

User · Answer

I would use table and implement the pagination in the controller to control how much is shown and buttons to move to the next page  This Fiddle might help you       lt table class  table table-striped table-condensed table-hover  gt                   lt thead gt                       lt tr gt                           lt th class  id  gt Id amp nbsp  lt a ng-click  sort by  id    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                           lt th class  name  gt Name amp nbsp  lt a ng-click  sort by  name    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                           lt th class  description  gt Description amp nbsp  lt a ng-click  sort by  description    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                           lt th class  field3  gt Field 3 amp nbsp  lt a ng-click  sort by  field3    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                           lt th class  field4  gt Field 4 amp nbsp  lt a ng-click  sort by  field4    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                           lt th class  field5  gt Field 5 amp nbsp  lt a ng-click  sort by  field5    gt  lt i class  icon-sort  gt  lt  i gt  lt  a gt  lt  th gt                       lt  tr gt                   lt  thead gt                   lt tfoot gt                       lt td colspan  6  gt                           lt div class  pagination pull-right  gt                               lt ul gt                                   lt li ng-class   disabled  currentPage    0   gt                                       lt a href ng-click  prevPage    gt    Prev lt  a gt                                   lt  li gt                                   lt li ng-repeat  n in range pagedItems length                                       ng-class   active  n    currentPage                                   ng-click  setPage    gt                                       lt a href ng-bind  n   1  gt 1 lt  a gt                                   lt  li gt                                   lt li ng-class   disabled  currentPage    pagedItems length - 1   gt                                       lt a href ng-click  nextPage    gt Next    lt  a gt                                   lt  li gt                               lt  ul gt                           lt  div gt                       lt  td gt                   lt  tfoot gt                   lt tbody gt                       lt tr ng-repeat  item in pagedItems currentPage    orderBy sortingOrder reverse  gt                           lt td gt   item id   lt  td gt                           lt td gt   item name   lt  td gt                           lt td gt   item description   lt  td gt                           lt td gt   item field3   lt  td gt                           lt td gt   item field4   lt  td gt                           lt td gt   item field5   lt  td gt                       lt  tr gt                   lt  tbody gt               lt  table gt     the  scope range in the fiddle example should be    scope range   function  size start  end        var ret                   console log size start  end           if  size  lt  end            end   size          if size lt  scope gap                start   0           else               start   size- scope gap                       for  var i   start  i  lt  end  i              ret push i                      console log ret               return ret

User · Answer

I use this solution   It s a bit more concise since I use  ng-repeat  obj in objects   filter   paginate  to filter the rows  Also made it working with  resource   http   plnkr co edit 79yrgwiwvan3bAG5SnKx p preview

User · Answer

The simplest way is using slice  You pipe the slice and mention the start index and end index for the part of the data you wish to display  Here is the code   HTML   lt table gt     lt thead gt              lt  thead gt     lt tbody gt        lt tr  ngFor  let row of rowData   slice startIndex endIndex  gt                    lt  tr gt     lt  tbody gt   lt  table gt   lt nav  ngIf  rowData  aria-label  Page navigation example  gt       lt ul class  pagination  gt           lt li class  page-item  gt               lt a class  page-link   click   updateIndex 0   aria-label  Previous  gt                   lt span aria-hidden  true  gt First lt  span gt               lt  a gt           lt  li gt           lt li  ngFor  let i of getArrayFromNumber rowData length   class  page-item  gt               lt a class  page-link   click   updateIndex i   gt   i 1   lt  a gt  lt  li gt            lt li class  page-item  gt               lt a class  page-link   click   updateIndex pageNumberArray length-1   aria-label  Next  gt                   lt span aria-hidden  true  gt Last lt  span gt               lt  a gt           lt  li gt       lt  ul gt   lt  nav gt     TypeScript      public rowData   data    data you want to display in table public paginationRowCount   100   number of records in a page     getArrayFromNumber length            if  length   this paginationRowCount     0                this pageNumberArray   Array from Array Math floor length   this paginationRowCount   keys               else               this pageNumberArray   Array from Array Math floor length   this paginationRowCount    1  keys                       return this pageNumberArray             updateIndex pageIndex            this startIndex   pageIndex   this paginationRowCount          if  this rowData length  gt  this startIndex   this paginationRowCount                this endIndex   this startIndex   this paginationRowCount            else               this endIndex   this rowData length                    Refence for tutorial  https   www youtube com watch v Q0jPfb9iyE0

User · Answer

This is the simplest example I found for pagination  http   code ciphertrick com 2015 06 01 search-sort-and-pagination-ngrepeat-angularjs

User · Answer

here i have solve my angularJS pagination issue with some more tweak in server side   view end  you can check the code it will be more efficient  all i have to do is put two value start number and end number   it will represent index of the returned json array    here is the angular   var refresh   function              loading   show         http get  http   put php OutputType JSON amp r all amp s      scope CountStart     amp l      scope CountEnd  success function  response             scope devices   response                loading   hide                 if you see carefully  scope CountStart and   scope CountStart are two argument i am passing with the api  here is the code for next button    scope nextPage   function              loading   css  display    block         scope nextPageDisabled          if   scope currentPage  gt   0             scope currentPage              scope CountStart    scope CountStart    scope DevicePerPage           scope CountEnd    scope CountEnd    scope DevicePerPage          refresh               here is the code for previous button    scope prevPage   function              loading   css  display    block         scope nextPageDisabled         if   scope currentPage  gt  0             scope currentPage--            scope CountStart    scope CountStart -  scope DevicePerPage           scope CountEnd    scope CountEnd -  scope DevicePerPage           refresh                if the page number is zero my previous button will be deactivated       scope nextPageDisabled   function           console log  scope currentPage        if   scope currentPage     0            return false        else           return true

[angularjs] How to achieve pagination/table layout with Angular.js?

Examples related to angularjs

Examples related to angular-ui

Examples related to angularjs-ng-repeat