//your data source may be different. the following line is 
     //just for demonstration purposes only
    var modelData = [{
      text: 'Test1'
    }, {
      text: 'Test2'
    }, {
      text: 'Test3'
    }];
    (function(util) {
      util.PAGE_SIZE = 10;
      util.range = function(start, end) {
        var rng = [];
        if (!end) {
          end = start;
          start = 0;
        }
        for (var i = start; i < end; i++)
          rng.push(i);
        return rng;
      };
      util.Pager = function(data) {
        var self = this,
          _size = util.PAGE_SIZE;;
        self.current = 0;
        self.content = function(index) {
          var start = index * self.size,
            end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);
          return data.slice(start, end);
        };
        self.next = function() {
          if (!self.canPage('Next')) return;
          self.current++;
        };
        self.prev = function() {
          if (!self.canPage('Prev')) return;
          self.current--;
        };
        self.canPage = function(dir) {
          if (dir === 'Next') return self.current < self.count - 1;
          if (dir === 'Prev') return self.current > 0;
          return false;
        };
        self.list = function() {
          var start, end;
          start = self.current < 5 ? 0 : self.current - 5;
          end = self.count - self.current < 5 ? self.count : self.current + 5;
          return Util.range(start, end);
        };
        Object.defineProperty(self, 'size', {
          configurable: false,
          enumerable: false,
          get: function() {
            return _size;
          },
          set: function(val) {
            _size = val || _size;
          }
        });
        Object.defineProperty(self, 'count', {
          configurable: false,
          enumerable: false,
          get: function() {
            return Math.ceil(data.length / self.size);
          }
        });
      };
    })(window.Util = window.Util || {});
    (function(ns) {
      ns.SampleController = function($scope, $window) {
        $scope.ModelData = modelData;
        //instantiate pager with array (i.e. our model)
        $scope.pages = new $window.Util.Pager($scope.ModelData);
      };
    })(window.Controllers = window.Controllers || {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
  <thead>
    <tr>
      <th>
        Col1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
      <td ng-bind-template="{{item.text}}"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <a href="#" ng-click="pages.prev()">&laquo;</a>
        <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
        <a href="#" ng-click="pages.next()">&raquo;</a>
      </td>
    </tr>
  </tfoot>
</table>

Antwoord 9

De jQuery Mobile-hoekadapter heeft een pagingfilter waarop u zich kunt baseren.

Hier is een demoviool die het gebruikt (voeg meer dan 5 items toe en het wordt opgeroepen): http:// jsfiddle.net/tigbro/Du2DY/

Hier is de bron: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

Antwoord 10

Voor iedereen die het moeilijk vindt om een paginator voor een tabel te maken, zoals ik, plaats ik dit.
Dus volgens jou :

         <pagination total-items="total" items-per-page="itemPerPage"    ng-model="currentPage" ng-change="pageChanged()"></pagination>    
        <!-- To specify your choice of items Per Pages-->
     <div class="btn-group">
                <label class="btn btn-primary" ng-model="radioModel"  btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
            </div>
     //And don't forget in your table:
      <tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >

In uw angularJ’s:

 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 <tr> 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);
              };
            });     

Antwoord 11

Ik gebruik deze pagineringsbibliotheek van derden en het werkt goed. Het kan lokale/externe gegevensbronnen aan en het is zeer configureerbaar.

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

<dir-pagination-controls
    [max-size=""]
    [direction-links=""]
    [boundary-links=""]
    [on-page-change=""]
    [pagination-id=""]
    [template-url=""]
    [auto-hide=""]>
    </dir-pagination-controls>

Antwoord 12

Sinds Angular 1.4 accepteert het limitTo-filter ook een tweede optioneel argument begin

Van de docs:

{{ limitTo_expression | limitTo: limit: begin}}

begin
(optioneel)
tekenreeks|nummer
Index waarop de beperking moet beginnen. Als een negatieve index geeft begin een offset aan vanaf het einde van de invoer. Standaard ingesteld op 0.

U hoeft dus geen nieuwe richtlijn te maken. Dit argument kan worden gebruikt om de offset van de paginering in te stellen

ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage" 

Antwoord 13

U kunt dit eenvoudig doen met de Bootstrap UI-richtlijn.

Dit antwoord is een wijziging van het antwoord van @Scotty.NET, ik heb de code gewijzigd omdat de <pagination>-instructie nu is verouderd.

De volgende code genereert de paginering:

<ul uib-pagination 
    boundary-links="true"  
    total-items="totalItems"  
    items-per-page="itemsPerPage"  
    ng-model="currentPage"  
    ng-change="pageChanged()"  
    class="pagination"  
    previous-text="&lsaquo;"  
    next-text="&rsaquo;"  
    first-text="&laquo;"  
    last-text="&raquo;">
</ul>

Gebruik dit in je controller om het functioneel te maken:

$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();

Raadpleeg dit voor meer opties voor paginering: Bootstrap UI pagineringrichtlijn

Antwoord 14

ng-repeat paginering

   <div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
 </select>
<ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
    </li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
 <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-                 click="currentPage=currentPage+1">
    Next
    </button>
</div>
<script>
 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<65; i++) {
    $scope.data.push("Item "+i);
   }
  }]);
        app.filter('startFrom', function() {
    return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
   }
  });
  </script>

Antwoord 15

Vorige berichten adviseerden in feite hoe je zelf een paging kunt bouwen. Als je net als ik bent en de voorkeur geeft aan een voltooide richtlijn, heb ik zojuist een geweldige gevonden genaamd ngTable. Het ondersteunt sorteren, filteren en pagineren.

Het is een zeer schone oplossing, alles wat je nodig hebt in jouw ogen:

  <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

En in de 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 naar GitHub: https://github.com/esvit/ng-table/

Antwoord 16

Angular-paging

is een geweldige keuze

Een richtlijn om te helpen bij het pagineren van grote datasets terwijl het absolute minimum aan daadwerkelijke paging-informatie nodig is. We zijn erg afhankelijk van de server voor het “filteren” van resultaten in dit paging-schema. Het centrale idee is dat we alleen de actieve “pagina” met items willen behouden – in plaats van de hele lijst met items in het geheugen en paginering aan de clientzijde te houden.

Antwoord 17

Oude vraag, maar omdat ik denk dat mijn aanpak een beetje anders en minder complex is, zal ik dit delen en hopen dat iemand anders dan ik het nuttig vindt.

Wat ik een eenvoudige en kleine oplossingvoor paginering vond, is om een richtlijn te combineren met een filter dat dezelfde bereikvariabelen gebruikt.

Om dit te implementeren, voegt u het filter toe aan de array en voegt u de richtlijn als volgt toe

<div class="row">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
                <td>{{item.Name}}</td>
                <td>{{item.Price}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
        </tbody>
    </table>
    <div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>

p_Size en p_Step zijn bereikvariabelen die kunnen worden aangepast in het bereik, anders is de standaardwaarde van p_Size 5 en p_Step is 1.

Als er een stap wordt gewijzigd in de paginering, wordt de p_Step bijgewerkt en wordt er een nieuwe filtering gestart door het filter cust_pagination.
Het cust_pagination-filter snijdt vervolgens de array op basis van de p_Step-waarde zoals hieronder en retourneert alleen de actieve records die zijn geselecteerd in de paginatiesectie

var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;

DEMOBekijk de volledige oplossing in deze plunker

Antwoord 18

Hier is mijn voorbeeld. Geselecteerde knop in het midden van de lijst
controleur.
config >>>

$scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};

Logica voor paginering:

/*
     Pagination
     */
    $scope.$watch('pagination.total', function (total) {
        if(!total || total <= $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) > totalPages){
            start = totalPages - $scope.pagination.config.size;
        }
        if(start <= 0) {
            start = 1;
        }
       finish = start +  $scope.pagination.config.size - 1;
       if(finish > totalPages){
           finish = totalPages;
       }
        for (var i = start; i <= finish; i++) {
            pages.push(i);
        }
        $scope.pagination.pages = pages;
    }
    $scope.$watch("pagination.config.page", function(page){
        _setPaginationPages($scope.pagination.total);
        _getRespondents($scope.pagination.config);
    });

en mijn kijk op bootstap

<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
        <li ng-click="pagination.config.page = pagination.config.page - 1"
            ng-class="{disabled: pagination.config.page == 1}" ><a href="#">&laquo;</a></li>
        <li ng-repeat="p in pagination.pages"
            ng-click="pagination.config.page = p"
            ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
        <li ng-click="pagination.config.page = pagination.config.page + 1"
            ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">&raquo;</a></li>
    </ul >

Het is handig

Antwoord 19

Ik wou dat ik kon reageren, maar ik moet dit hier achterlaten:

Het antwoord van Scotty.NET en het opnieuw uitvoeren van user2176745 voor latere versies zijn beide geweldig, maar ze missen allebei iets dat mijn versie van AngularJS (v1.3.15) breekt:

i is niet gedefinieerd in $scope.makeTodos.

Als zodanig wordt het vervangen door deze functie hersteld voor recentere hoekige versies.

$scope.makeTodos = function() {
    var i;
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
        $scope.todos.push({ text:'todo '+i, done:false});
    }
};

Antwoord 20

Overzicht :Paginering met

- ng-repeat
 - uib-pagination

Bekijk :

<div class="row">
    <div class="col-lg-12">
        <table class="table">
            <thead style="background-color: #eee">
                <tr>
                    <td>Dispature</td>
                    <td>Service</td>
                    <td>Host</td>
                    <td>Value</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in app.metricsList">
                    <td>{{x.dispature}}</td>
                    <td>{{x.service}}</td>
                    <td>{{x.host}}</td>
                    <td>{{x.value}}</td>
                </tr>
            </tbody>
        </table>
        <div align="center">
            <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()"></uib-pagination>        
            <div style="float: right; margin: 15px">
                <pre>Page: {{app.currentPage}} / {{numPages}}</pre>
            </div>          
        </div>
    </div>
</div>

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();
}]);

Antwoord 21

Ik wil graag mijn oplossing toevoegen die werkt met ngRepeaten filters die je ermee gebruikt zonder een $watchof een sliced array te gebruiken.

Uw filterresultaten worden gepagineerd!

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 >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
            && index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
        )
            return true; //return true if item index is on the currentPage
        return false;
    };
}]);

Zorg ervoor dat u in de HTML uw filters toepast op de ngRepeatvóórhet pagineringsfilter.

<table data-ng-controller="myController">
    <tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
        <td>
            {{item}}
        </td>
    <tr>
</table>
<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="&lsaquo;"
    data-next-text="&rsaquo;"
    data-first-text="&laquo;"
    data-last-text="&raquo;">
 </ul>