Wie funktioniert Paging in AngularJS?

Angular-UI-Bootstrap - Pagination Richtlinie

Check-out UI Bootstrap's Paginierung Richtlinie. Ich landete mit es eher als das, was hier gepostet als es hat genug features für meine aktuelle Verwendung und hat eine Gründliche test-spec zu begleiten.

Ansicht

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

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

Ich habe eine arbeiten plunker für Referenz.

Legacy-Version:

Ansicht

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

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

Ich habe eine arbeiten plunker für Referenz.

InformationsquelleAutor der Antwort Scotty.NET

Ich habe zu implementieren, die Paginierung schon ein paar mal mit Eckigen, und es war immer ein bisschen wie ein Schmerz für etwas, das ich fühlte, konnte vereinfacht werden. Ich habe verwendet einige der hier vorgestellten Ideen und anderswo, um eine Seitenumbruch-Modul, das macht die Paginierung einfach:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

//then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

Das ist es. Es hat die folgenden Funktionen:

• Keine benutzerdefinierten code in Ihr controller zu binden, die Sammlung items auf die Seitenzählung links.
• Sie sind nicht gebunden an die Verwendung einer Tabelle oder gridview - Sie können den Seitenumbruch etwas kann man ng-repeat!
• Delegierten ng-repeat, so können Sie jeden beliebigen Ausdruck verwenden, könnte rechtmäßig in einem ng-repeat, einschließlich Filterung, Bestellung etc.
• Funktioniert über Controller - die pagination-controls Richtlinie nicht zu wissen, etwas über den Kontext, in dem die paginate Richtlinie genannt wird.

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

Für diejenigen, die sich für eine "plug and play" Lösung, denke ich, werden Sie diese nützlich finden.

Code

Den code gibt es hier auf GitHub und beinhaltet eine ziemlich gute Reihe von tests:

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

Wenn Sie interessiert sind, schrieb ich auch ein kurzes Stück mit ein wenig mehr Einblick in das design des Moduls: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

InformationsquelleAutor der Antwort Michael Bromley

Ich aktualisiert Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview, so dass es mit neueren Versionen von angular, angular-ui und 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<=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-Komponente

 <pagination boundary-links="true" 
    max-size="3" 
    items-per-page="itemsPerPage"
    total-items="todos.length" 
    ng-model="currentPage" 
    ng-change="pageChanged()"></pagination>

InformationsquelleAutor der Antwort user2176745

Dem jQuery Mobile angular adapter hat eine paging-filter könnte man die Basis der.

Hier ist eine demo-fiddle, der es verwendet (fügen Sie mehr als 5 Artikel und es wird ausgelagert): http://jsfiddle.net/tigbro/Du2DY/

Hier ist die Quelle: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

InformationsquelleAutor der Antwort Andrew Joslin

Unten die Lösung ganz einfach.

<pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
</pagination>

<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> 

Hier ist Beispiel jsfiddle

InformationsquelleAutor der Antwort Sh4m

ng-repeat Paginierung

    <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>

InformationsquelleAutor der Antwort Asad

Vorherigen Nachrichten empfohlen im Grunde, wie man eine paging selbst. Wenn Sie wie ich sind und lieber eine fertige Richtlinie, fand ich eine große nannte man ngTable. Es unterstützt die Sortierung, Filterung und Paginierung.

Es ist eine sehr saubere Lösung, alles, was Sie brauchen, aus Ihrer Sicht:

   <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>

Und im 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 zu GitHub: https://github.com/esvit/ng-table/

InformationsquelleAutor der Antwort Carlos Barcelona

Winkel-Paging

ist eine wunderbare Wahl

Einer Richtlinie Hilfe bei der paging von großen Datenmengen verlangen, während das absolute minimum des eigentlichen paging-Informationen. Wir sind sehr abhängig von der server für die "Filterung" der Ergebnisse in diesem paging-Schema. Die zentrale Idee, der wir nur wollen, halten Sie den aktiven "Seite" der Gegenstände - anstatt halten die gesamte Liste der Elemente im Speicher und paging auf der client-Seite.

InformationsquelleAutor der Antwort sendreams

Übersicht : Paginierung mit

 - ng-repeat
 - uib-pagination

Ansicht :

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

}]);

InformationsquelleAutor der Antwort Riddhi Gohil

Können Sie ganz einfach tun dies mit Hilfe von Bootstrap UI-Richtlinie.

Diese Antwort ist eine Abwandlung der Antwort von @Scotty.NET ich habe den code veränderte, weil <pagination> Richtlinie ist veraltet jetzt.

Folgende code erzeugt die Seitenzählung:

<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>

Funktionsfähig zu machen, verwenden Sie diese in Ihrem 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();

Beziehen, um diese für weitere Optionen der Seitenzählung: Bootstrap UI Paginierung Richtlinie

InformationsquelleAutor der Antwort Astitva Srivastava