How to do paging in AngularJS

Question

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 function to filter the results  and that works fine  but somehow I need to get the number of pages out   Any clues

User · Answer

Below solution quite simple    lt pagination           total-items  totalItems           items-per-page   itemsPerPage          ng-model  currentPage           class  pagination-sm  gt   lt  pagination gt    lt tr ng-repeat  country in countries slice  currentPage -1    itemsPerPage  currentPage   itemsPerPage    gt     Here is sample jsfiddle

User · Answer

You can easily do this using Bootstrap UI directive   This answer is a modification of the answer given by  Scotty NET  I have changed the code because  lt pagination gt  directive is deprecated now   Following code generates the pagination    lt ul uib-pagination      boundary-links  true        total-items  totalItems        items-per-page  itemsPerPage        ng-model  currentPage        ng-change  pageChanged          class  pagination        previous-text   amp lsaquo         next-text   amp rsaquo         first-text   amp laquo         last-text   amp raquo   gt   lt  ul gt    To make it functional  use this in your controller    scope filteredData       scope totalItems    scope data length   scope currentPage   1   scope itemsPerPage   5    scope setPage   function  pageNo         scope currentPage   pageNo       scope pageChanged   function         var begin      scope currentPage - 1     scope itemsPerPage        end   begin    scope itemsPerPage        scope filteredData    scope data slice begin  end        scope pageChanged      Refer to this for more options of pagination  Bootstrap UI Pagination Directive

User · Answer

I recently implemented paging for the Built with Angular site  You chan checkout the source  https   github com angular builtwith angularjs org  I d avoid using a filter to separate the pages  You should break up the items into pages within the controller

User · Answer

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

User · Answer

I just made a JSFiddle that show pagination   search   order by on each column using btford code  http   jsfiddle net SAWsA 11

User · Answer

I ve extracted the relevant bits here  This is a  no frills  tabular pager  so sorting or filtering is not included  Feel free to change add as needed    x000D   x000D         your data source may be different  the following line is  x000D         just for demonstration purposes only x000D      var modelData      x000D        text   Test1  x000D           x000D        text   Test2  x000D           x000D        text   Test3  x000D          x000D   x000D       function util    x000D   x000D        util PAGE SIZE   10  x000D   x000D        util range   function start  end    x000D          var rng       x000D   x000D          if   end    x000D            end   start  x000D            start   0  x000D            x000D   x000D          for  var i   start  i  lt  end  i    x000D            rng push i   x000D   x000D          return rng  x000D           x000D   x000D        util Pager   function data    x000D          var self   this  x000D             size   util PAGE SIZE   x000D   x000D          self current   0  x000D   x000D          self content   function index    x000D            var start   index   self size  x000D              end    index   self size   self size   gt  data length   data length    index   self size   self size   x000D   x000D            return data slice start  end   x000D             x000D   x000D          self next   function     x000D            if   self canPage  Next    return  x000D            self current    x000D             x000D   x000D          self prev   function     x000D            if   self canPage  Prev    return  x000D            self current--  x000D             x000D   x000D          self canPage   function dir    x000D            if  dir      Next   return self current  lt  self count - 1  x000D            if  dir      Prev   return self current  gt  0  x000D            return false  x000D             x000D   x000D          self list   function     x000D            var start  end  x000D            start   self current  lt  5   0   self current - 5  x000D            end   self count - self current  lt  5   self count   self current   5  x000D            return Util range start  end   x000D             x000D   x000D          Object defineProperty self   size     x000D            configurable  false  x000D            enumerable  false  x000D            get  function     x000D              return  size  x000D               x000D            set  function val    x000D               size   val     size  x000D              x000D              x000D   x000D          Object defineProperty self   count     x000D            configurable  false  x000D            enumerable  false  x000D            get  function     x000D              return Math ceil data length   self size   x000D              x000D              x000D           x000D   x000D         window Util   window Util         x000D   x000D       function ns    x000D        ns SampleController   function  scope   window    x000D           scope ModelData   modelData  x000D            instantiate pager with array  i e  our model  x000D           scope pages   new  window Util Pager  scope ModelData   x000D           x000D         window Controllers   window Controllers         x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt table ng-controller  Controllers SampleController  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  x000D          Col1 x000D         lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr ng-repeat  item in pages content pages current   title    item text    gt  x000D         lt td ng-bind-template    item text    gt  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D     lt tfoot gt  x000D       lt tr gt  x000D         lt td colspan  4  gt  x000D           lt a href     ng-click  pages prev    gt  amp laquo  lt  a gt  x000D           lt a href     ng-repeat  n in pages list    ng-click  pages current   n  style  margin  0 2px   gt   n   1   lt  a gt  x000D           lt a href     ng-click  pages next    gt  amp raquo  lt  a gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tfoot gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

For anyone who find it difficult like me to create a paginator for a table I post this  So  in your view               lt pagination total-items  total  items-per-page  itemPerPage     ng-model  currentPage  ng-change  pageChanged    gt  lt  pagination gt               lt  -- To specify your choice of items Per Pages-- gt        lt div class  btn-group  gt                   lt label class  btn btn-primary  ng-model  radioModel   btn-radio   Left   data-ng-click  setItems 5   gt 5 lt  label gt                   lt label class  btn btn-primary  ng-model  radioModel  btn-radio   Middle   data-ng-click  setItems 10   gt 10 lt  label gt                   lt label class  btn btn-primary  ng-model  radioModel  btn-radio   Right   data-ng-click  setItems 15   gt 15 lt  label gt               lt  div gt         And don t forget in your table         lt tr data-ng-repeat  p in profiles   offset   currentPage-1  itemPerPage   limitTo  itemPerPage   gt    In your angularJs     var module   angular module  myapp    ui bootstrap   dialogs       module controller  myController  function  scope  http       scope total    scope mylist length           scope currentPage   1      scope itemPerPage   2      scope start   0       scope setItems   function n             scope itemPerPage   n              In case you can replace   scope currentPage - 1     scope itemPerPage in  lt tr gt  by  start      scope pageChanged   function              scope start     scope currentPage - 1     scope itemPerPage                            and our filter      module filter  offset   function                   return function input  start                    start   parseInt start  10                   return input slice start

User · Answer

Previous messages recommended basically how to build a paging by yourself  If you are like me  and prefer a finished directive  I just found a great one called ngTable  It supports sorting  filtering and pagination    It is a very clean solution  all you need in your view       lt table ng-table  tableParams  class  table  gt           lt tr ng-repeat  user in  data  gt               lt td data-title   Name   sortable   name   gt                    user name                lt  td gt               lt td data-title   Age   sortable   age   gt                    user age                lt  td gt           lt  tr gt       lt  table gt    And in controller    scope tableParams   new ngTableParams       page  1                show first page     count  10              count per page     sorting            name   asc         initial sorting                total  data length     length of data     getData  function  defer  params               use build-in angular filter         var orderedData   params sorting                                  filter  orderBy   data  params orderBy                                  data           var start    params page   - 1    params count            var end   params page     params count              defer resolve orderedData slice  start  end                Link to GitHub  https   github com esvit ng-table

User · Answer

I would like to add my solution that works with ngRepeat and filters that you use with it without using a  watch or a sliced array   Your filter results will be paginated   var app   angular module  app     ui bootstrap      app controller  myController      scope   function  scope        scope list    a    b    c    d    e          scope pagination             currentPage  1          numPerPage  5          totalItems  0              scope searchFilter   function item              Your filter results will be paginated            The pagination will work even with other filters involved           The total number of items in the result of your filter is accounted for              scope paginationFilter   function item  index              Every time the filter is used it restarts the totalItems         if index     0                scope pagination totalItems   0             This holds the totalItems after the filters are applied          scope pagination totalItems             if              index  gt      scope pagination currentPage - 1     scope pagination numPerPage               amp  amp  index  lt      scope pagination currentPage - 1     scope pagination numPerPage     scope pagination numPerPage                        return true    return true if item index is on the currentPage          return false                In the HTML make sure that you apply your filters to the ngRepeat before the pagination filter    lt table data-ng-controller  myController  gt       lt tr data-ng-repeat  item in list   filter  searchFilter   filter  paginationFilter track by  index  gt           lt td gt                item            lt  td gt       lt tr gt   lt  table gt   lt ul class  pagination-sm      uib-pagination     data-boundary-links  true      data-total-items  pagination totalItems      data-items-per-page  pagination numPerPage      data-ng-model  pagination currentPage      data-previous-text   amp lsaquo       data-next-text   amp rsaquo       data-first-text   amp laquo       data-last-text   amp raquo   gt    lt  ul gt

User · Answer

I updated Scotty NET s plunkr http   plnkr co edit FUeWwDu0XzO51lyLAEIA p preview so that it uses newer versions of angular  angular-ui  and bootstrap   Controller  var todos   angular module  todos     ui bootstrap      todos controller  TodoController   function  scope       scope filteredTodos          scope itemsPerPage   30     scope currentPage   4      scope makeTodos   function          scope todos           for  i 1 i lt  1000 i             scope todos push   text  todo   i  done false                   scope figureOutTodosToDisplay   function         var begin      scope currentPage - 1     scope itemsPerPage       var end   begin    scope itemsPerPage       scope filteredTodos    scope todos slice begin  end            scope makeTodos        scope figureOutTodosToDisplay        scope pageChanged   function          scope figureOutTodosToDisplay                Bootstrap UI component    lt pagination boundary-links  true       max-size  3       items-per-page  itemsPerPage      total-items  todos length       ng-model  currentPage       ng-change  pageChanged    gt  lt  pagination gt

User · Answer

Angular-Paging  is a wonderful choice     A directive to aid in paging large datasets while requiring the bare minimum of actual paging information  We are very dependant on the server for  filtering  results in this paging scheme  The central idea being we only want to hold the active  page  of items - rather than holding the entire list of items in memory and paging on the client-side

User · Answer

Overview   Pagination using    - ng-repeat  - uib-pagination      View      lt div class  row  gt       lt div class  col-lg-12  gt           lt table class  table  gt               lt thead style  background-color   eee  gt                   lt tr gt                       lt td gt Dispature lt  td gt                       lt td gt Service lt  td gt                       lt td gt Host lt  td gt                       lt td gt Value lt  td gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr ng-repeat  x in app metricsList  gt                       lt td gt   x dispature   lt  td gt                       lt td gt   x service   lt  td gt                       lt td gt   x host   lt  td gt                       lt td gt   x value   lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt            lt div align  center  gt               lt uib-pagination items-per-page  app itemPerPage  num-pages  numPages                  total-items  app totalItems  boundary-link-numbers  true                  ng-model  app currentPage  rotate  false  max-size  app maxSize                  class  pagination-sm  boundary-links  true                  ng-click  app getPagableRecords    gt  lt  uib-pagination gt                        lt div style  float  right  margin  15px  gt                   lt pre gt Page    app currentPage       numPages   lt  pre gt               lt  div gt                     lt  div gt       lt  div gt   lt  div gt       JS Controller     app controller  AllEntryCtrl     scope    http    timeout    rootScope   function  scope  http  timeout  rootScope        var app   this      app currentPage   1      app maxSize   5      app itemPerPage   5      app totalItems   0       app countRecords   function              http get  countRecord            success function data status headers config               app totalItems   data                      error function data status header config               console log data                           app getPagableRecords   function             var param                     page   app currentPage                  size   app itemPerPage                       http get  allRecordPagination   params   param            success function data status headers config               app metricsList   data content                      error function data status header config               console log data                           app countRecords        app getPagableRecords

User · Answer

This is a pure javascript solution that I ve wrapped as an Angular service to implement pagination logic like in google search results   Working demo on CodePen at http   codepen io cornflourblue pen KVeaQL   Details and explanation at this blog post  function PagerService            service definition     var service            service GetPager   GetPager       return service          service implementation     function GetPager totalItems  currentPage  pageSize               default to first page         currentPage   currentPage    1              default page size is 10         pageSize   pageSize    10              calculate total pages         var totalPages   Math ceil totalItems   pageSize            var startPage  endPage          if  totalPages  lt   10                   less than 10 total pages so show all             startPage   1              endPage   totalPages            else                  more than 10 total pages so calculate start and end pages             if  currentPage  lt   6                    startPage   1                  endPage   10                else if  currentPage   4  gt   totalPages                    startPage   totalPages - 9                  endPage   totalPages                else                   startPage   currentPage - 5                  endPage   currentPage   4                                      calculate start and end item indexes         var startIndex    currentPage - 1    pageSize          var endIndex   startIndex   pageSize              create an array of pages to ng-repeat in the pager control         var pages     range startPage  endPage   1               return object with all pager properties required by the view         return               totalItems  totalItems              currentPage  currentPage              pageSize  pageSize              totalPages  totalPages              startPage  startPage              endPage  endPage              startIndex  startIndex              endIndex  endIndex              pages  pages

User · Answer

There is my example  Selected button in the middle on the list Controller  config        scope pagination    total  null  pages      config   count  10  page  1  size  7      Logic for pagination           Pagination              scope  watch  pagination total   function  total            if  total    total  lt    scope pagination config count  return           setPaginationPages total                function  setPaginationPages total            var totalPages   Math ceil total    scope pagination config count           var pages               var start    scope pagination config page - Math floor  scope pagination config size 2           var finish   null           if  start    scope pagination config size - 1   gt  totalPages               start   totalPages -  scope pagination config size                    if start  lt   0                start   1                    finish   start     scope pagination config size - 1         if finish  gt  totalPages              finish   totalPages                     for  var i   start  i  lt   finish  i                  pages push i                       scope pagination pages   pages              scope  watch  pagination config page   function page            setPaginationPages  scope pagination total            getRespondents  scope pagination config             and my view on bootstap   lt ul ng-class   hidden  pagination total    0   class  pagination  gt           lt li ng-click  pagination config page   pagination config page - 1              ng-class   disabled  pagination config page    1    gt  lt a href     gt  amp laquo  lt  a gt  lt  li gt           lt li ng-repeat  p in pagination pages              ng-click  pagination config page   p              ng-class   active  p    pagination config page   gt  lt a href     gt   p   lt  a gt  lt  li gt           lt li ng-click  pagination config page   pagination config page   1              ng-class   disabled  pagination config page    pagination pages length   gt  lt a href     gt  amp raquo  lt  a gt  lt  li gt       lt  ul  gt    It is useful

User · Answer

Old question but since I think my approach is a bit different and less complex I will share this and hope that someone besides me find it useful   What I found to be an easy and small solution to pagination is to combine a directive with a filter which uses the same scope variables   To implement this you add the filter on the array and add the directiv like this   lt div class  row  gt       lt table class  table table-hover  gt           lt thead gt               lt tr gt                   lt th gt Name lt  th gt                   lt th gt Price lt  th gt                   lt th gt Quantity lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr ng-repeat  item in items   cust pagination p Size p Step  gt                   lt td gt   item Name   lt  td gt                   lt td gt   item Price   lt  td gt                   lt td gt   item Quantity   lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt       lt div cust-pagination p-items  items  p-boundarylinks  true  p-size  p Size  p-step  p Step  gt  lt  div gt   lt  div gt    p Size and p Step are scope variables which can be customized in the scope else the default value of the p Size is 5 and p Step is 1   When a step is change in the pagination the p Step is updated and will trigger a new filtering by cust pagination filter  The cust pagination filter then slices the array depending on the p Step value like below and only return the active records selected in the pagination section  var startIndex   nStep   nPageSize  var endIndex   startIndex   nPageSize  var arr   items slice startIndex  endIndex   return arr    DEMO View the complete solution in this plunker

User · Answer

I wish I could comment  but I ll just have to leave this here    Scotty NET s answer and user2176745 s redo for later versions are both great  but they both miss something that my version of AngularJS  v1 3 15  breaks on    i is not defined in  scope makeTodos    As such  replacing with this function fixes it for more recent angular versions    scope makeTodos   function         var i       scope todos           for  i 1 i lt  1000 i               scope todos push   text  todo   i  done false

User · Answer

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   lt ul gt       lt li dir-paginate  quot item in items   itemsPerPage  10 quot  gt    item    lt  li gt   lt  ul gt      then somewhere else on the page        lt dir-pagination-controls gt  lt  dir-pagination-controls gt   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  quot plug and play quot  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

User · Answer

I use this 3rd party pagination library and it works well  It can do local remote datasources and it s very configurable   https   github com michaelbromley angularUtils tree master src directives pagination   lt dir-pagination-controls      max-size          direction-links          boundary-links          on-page-change          pagination-id          template-url          auto-hide     gt       lt  dir-pagination-controls gt

User · Answer

ng-repeat pagination       lt div ng-app  myApp  ng-controller  MyCtrl  gt   lt input ng-model  q  id  search  class  form-control  placeholder  Filter text  gt   lt select ng-model  pageSize  id  pageSize  class  form-control  gt       lt option value  5  gt 5 lt  option gt       lt option value  10  gt 10 lt  option gt       lt option value  15  gt 15 lt  option gt       lt option value  20  gt 20 lt  option gt    lt  select gt   lt ul gt       lt li ng-repeat  item in data   filter q   startFrom currentPage pageSize   limitTo pageSize  gt            item        lt  li gt   lt  ul gt   lt button ng-disabled  currentPage    0  ng-click  currentPage currentPage-1  gt      Previous  lt  button gt    currentPage 1     numberOfPages       lt button ng-disabled  currentPage  gt   getData   length pageSize - 1  ng-                 click  currentPage currentPage 1  gt      Next      lt  button gt   lt  div gt    lt script gt    var app angular module  myApp          app controller  MyCtrl      scope     filter   function   scope   filter      scope currentPage   0    scope pageSize   10    scope data         scope q          scope getData   function         return  filter  filter    scope data   scope q             scope numberOfPages function        return Math ceil  scope getData   length  scope pageSize                            for  var i 0  i lt 65  i           scope data push  Item   i                        app filter  startFrom   function         return function input  start        start    start    parse to int     return input slice start                 lt  script gt

User · Answer

Angular UI Bootstrap - Pagination Directive  Check out UI Bootstrap s pagination directive  I ended up using it rather than what is posted here as it has enough features for my current use and has a thorough test spec to accompany it   View   lt  -- table here -- gt    lt pagination    ng-model  currentPage    total-items  todos length    max-size  maxSize      boundary-links  true  gt   lt  pagination gt    lt  -- items page select here if you like -- gt    Controller  todos controller  TodoController   function  scope        scope filteredTodos          scope currentPage   1     scope numPerPage   10     scope maxSize   5      scope makeTodos   function          scope todos           for  i 1 i lt  1000 i             scope todos push   text  todo   i  done false                  scope makeTodos         scope  watch  currentPage   numPerPage   function         var begin      scope currentPage - 1     scope numPerPage        end   begin    scope numPerPage        scope filteredTodos    scope todos slice begin  end               I have made a working plunker for reference     Legacy Version   View   lt  -- table here -- gt    lt div data-pagination    data-num-pages  numPages       data-current-page  currentPage  data-max-size  maxSize      data-boundary-links  true  gt  lt  div gt    lt  -- items page select here if you like -- gt    Controller  todos controller  TodoController   function  scope        scope filteredTodos          scope currentPage   1     scope numPerPage   10     scope maxSize   5      scope makeTodos   function          scope todos           for  i 1 i lt  1000 i             scope todos push   text  todo   i  done false                  scope makeTodos         scope numPages   function          return Math ceil  scope todos length    scope numPerPage            scope  watch  currentPage   numPerPage   function         var begin      scope currentPage - 1     scope numPerPage        end   begin    scope numPerPage        scope filteredTodos    scope todos slice begin  end               I have made a working plunker for reference

User · Answer

Since Angular 1 4  the limitTo filter also accepts a second optional argument begin  From the docs         limitTo expression   limitTo   limit   begin        begin    optional    string number   Index at which to begin limitation  As a negative index  begin indicates an offset from the end of input  Defaults to 0    So you don t need to create a new directive  This argument can be used to set the offset of the pagination  ng-repeat  item in vm items  limitTo  vm itemsPerPage   vm currentPage-1  vm itemsPerPage

[angularjs] How to do paging in AngularJS?

Examples related to angularjs

[angularjs] How to do paging in AngularJS?

Examples related to angularjs

Examples related to pagination