Pagination on a list using ng-repeat

Question

I m trying to add pages to my list  I followed the AngularJS tutorial  the one about smartphones and I m trying to display only certain number of objects  Here is my html file      lt div class  container-fluid  gt       lt div class  row-fluid  gt           lt div class  span2  gt              Search   lt input ng-model  searchBar  gt              Sort by                lt select ng-model  orderProp  gt                   lt option value  name  gt Alphabetical lt  option gt                   lt option value  age  gt Newest lt  option gt               lt  select gt              You selected the phones to be ordered by    orderProp            lt  div gt            lt div class  span10  gt             lt select ng-model  limit  gt               lt option value  5  gt Show 5 per page lt  option gt               lt option value  10  gt Show 10 per page lt  option gt               lt option value  15  gt Show 15 per page lt  option gt               lt option value  20  gt Show 20 per page lt  option gt             lt  select gt             lt ul class  phones  gt               lt li class  thumbnail  ng-repeat  phone in phones   filter searchBar   orderBy orderProp   limitTo limit  gt                   lt a href    phones   phone id    class  thumb  gt  lt img ng-src    phone imageUrl    gt  lt  a gt                   lt a href    phones   phone id    gt   phone name   lt  a gt                   lt p gt   phone snippet   lt  p gt               lt  li gt             lt  ul gt           lt  div gt       lt  div gt     lt  div gt    I ve added a select tag with some values in order to limit the number of items that will be displayed  What I want now is to add the pagination to display the next 5  10  etc   I have a controller that works with this   function PhoneListCtrl  scope  Phone        scope phones   Phone query         scope orderProp    age        scope limit   5      And also I have a module in order to retrieve the data from the json files   angular module  phonecatServices     ngResource         factory  Phone   function  resource           return  resource  phones  phoneId json                     query   method   GET   params  phoneId  phones    isArray true

User · Answer

I ve built a module that makes in-memory pagination incredibly simple    It allows you to paginate by simply replacing ng-repeat with dir-paginate  specifying the items per page as a piped filter  and then dropping the controls wherever you like in the form of a single directive   lt dir-pagination-controls gt   To take the original example asked by Tomarto  it would look like this    lt ul class  phones  gt       lt li class  thumbnail  dir-paginate  phone in phones   filter searchBar   orderBy orderProp   limitTo limit   itemsPerPage  limit  gt               lt a href    phones   phone id    class  thumb  gt  lt img ng-src    phone imageUrl    gt  lt  a gt               lt a href    phones   phone id    gt   phone name   lt  a gt               lt p gt   phone snippet   lt  p gt       lt  li gt   lt  ul gt    lt dir-pagination-controls gt  lt  dir-pagination-controls gt    There is no need for any special pagination code in your controller  It s all handled internally by the module   Demo  http   plnkr co edit Wtkv71LIqUR4OhzhgpqL p preview  Source  dirPagination of GitHub

User · Answer

Check out this directive  https   github com samu angular-table  It automates sorting and pagination a lot and gives you enough freedom to customize your table list however you want

User · Answer

I know this thread is old now but I am answering it to keep things a bit updated   With Angular 1 4 and above you can directly use limitTo filter which apart from accepting the limit parameter also accepts a begin parameter   Usage     limitTo expression   limitTo   limit   begin    So now you may not need to use any third party library to achieve something like pagination  I have created a fiddle to illustrate the same

User · Answer

If you have not too much data  you can definitely do pagination by just storing all the data in the browser and filtering what s visible at a certain time     Here s a simple pagination example  http   jsfiddle net 2ZzZB 56   That example was on the list of fiddles on the angular js github wiki  which should be helpful  https   github com angular angular js wiki JsFiddle-Examples    EDIT  http   jsfiddle net 2ZzZB 16   to  http   jsfiddle net 2ZzZB 56   won t show  1 4 5  if there is 45 results

User · Answer

Here is a demo code where there is pagination   Filtering with AngularJS     https   codepen io lamjaguar pen yOrVym  JS     var app angular module  myApp            alternate - https   github com michaelbromley angularUtils tree master src directives pagination    alternate - http   fdietz github io recipes-with-angular-js common-user-interface-patterns paginating-through-client-side-data html  app controller  MyCtrl      scope     filter   function   scope   filter         scope currentPage   0       scope pageSize   10       scope data            scope q             scope getData   function               needed for the pagination calc          https   docs angularjs org api ng filter filter       return  filter  filter    scope data   scope q                     manual filter           if u used this  remove the filter from html  remove above line and replace data with getData            var arr               if  scope q                      arr    scope data            else               for var ea in  scope data                    if  scope data ea  indexOf  scope q   gt  -1                        arr push   scope data ea                                                       return arr                        scope numberOfPages function            return Math ceil  scope getData   length  scope pageSize                              for  var i 0  i lt 65  i               scope data push  Item   i              A watch to bring us back to the       first pagination after each       filtering  scope  watch  q   function newValue oldValue               if oldValue  newValue          scope currentPage   0        true           We already have a limitTo filter built-in to angular    let s make a startFrom filter app filter  startFrom   function         return function input  start            start    start    parse to int         return input slice start               HTML      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

User · Answer

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

[javascript] Pagination on a list using ng-repeat

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

Source: dirPagination of GitHub

Examples related to javascript

Examples related to angularjs

Examples related to paginate