How can i do pagination while showing data using angular js?

Question

How can i do pagination while showing data using angular js ?

below is my code in view:

<table class="table table-hover">

    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success" ng-repeat="x in data">
        <td>{{ x.fname }}</td>
        <td>{{ x.lname }}</td>
        <td>{{ x.age }}</td>
      </tr>

    </tbody>
  </table>

here the data will be coming from controller.Huge amount of data will be returned by controller. So i would like add pagination here with 10 records per page.I can add bootstrap pagination but i don't know how to split this result in to different and showing in different page using pagination.

look at this Angular-Paging brantwills.github.io/Angular-Paging — Pankaj Parkar
– Pankaj Parkar, Commented Jun 5, 2015 at 7:32
I personally use the method in the 2nd answer by @Spir found here and the [fiddle] (jsfiddle.net/SAWsA/11). I ended up placing the pagination in its own controller so that I could reuse it easier — Sylvan D Ash
– Sylvan D Ash, Commented Jun 5, 2015 at 7:49

forgottofly · Accepted Answer · 2015-06-05 07:40:07Z

You can go with two approach:

Front End Pagination:
Backend Pagination

Please find the list of plunkers for reference

you can alsu use bootstrap pagination directive HTML

<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

<hr />
<h4>Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>

<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

Controller:

  angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;

  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.pageChanged = function() {
    $log.log('Page changed to: ' + $scope.currentPage);
  };

  $scope.maxSize = 5;
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
});

Avinash Solanki · Accepted Answer · 2015-06-05 07:57:26Z

0

you can also use SmartTable it is a very good plugin for basic table operation s and also supports client side and Server Side configuration

http://lorenzofox3.github.io/smart-table-website/

answered Jun 5, 2015 at 7:57

Avinash Solanki

1,1011 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

How can i do pagination while showing data using angular js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related