Come eseguire il paging in AngularJS?


254

Ho un set di dati di circa 1000 elementi in memoria e sto tentando di creare un cercapersone per questo set di dati, ma non sono sicuro su come farlo.

Sto usando una funzione di filtro personalizzata per filtrare i risultati, e funziona benissimo, ma in qualche modo ho bisogno di ottenere il numero di pagine.

Qualche indizio?


Risposte:


285

Bootstrap angolare UI - Direttiva impaginazione

Scopri UI Bootstrap s' direttiva impaginazione . Ho finito per usarlo piuttosto che ciò che è pubblicato qui in quanto ha abbastanza funzionalità per il mio uso corrente e ha una specifica di prova approfondita per accompagnarlo.

Visualizza

<!-- table here -->

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

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

controllore

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

Ho creato un plunker funzionante come riferimento.


Versione legacy:

Visualizza

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

controllore

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

Ho creato un plunker funzionante come riferimento.


2
bello ed elegante. Potrebbe essere migliorato aggiungendo una specie
Carlos Barcelona,

3
L'attributo num-pages non è più necessario ed è di sola lettura. Non è necessario passare numPages. Vedi la documentazione: angular-ui.github.io/bootstrap/#/pagination
kvetis

3
RISOLTO: items-per-page è la proprietà che deve essere impostata paginationnell'elemento.
Bogac,

1
^^^^ Per tutti i nuovi lettori vedere il commento di Bogacs: gli elementi per pagina sono ora necessari nell'elemento impaginazione. Non funziona senza di essa.
IfTrue,

14
<paginazione> è ora obsoleto. Utilizzare invece <uib-pagination>.
mnm,

88

Di recente ho implementato il paging per il sito Built with Angular. Puoi controllare la fonte: https://github.com/angular/builtwith.angularjs.org

Eviterei di usare un filtro per separare le pagine. È necessario suddividere gli elementi in pagine all'interno del controller.


61
La soluzione è distribuita su più file. Devi guardare almeno nel controller e nella vista. Non vedo come ciò Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
meriti un voto negativo

2
Puoi iniziare a guardare la <div class = "pagination"> di index.html github.com/angular/builtwith.angularjs.org/blob/master/…
Jorge Nunez Newton,

6
@btford Perché dovresti evitare di usare un filtro?
CWSpear

4
Ho votato a favore per contrastare il precedente voto negativo perché ho ritenuto che il poster fornisse un esempio di qualità che può essere utilizzato per rispondere alla domanda originale.
RachelD,

1
@btford È ancora una cattiva idea impaginare usando un filtro? Ecco un plunkr che impagina un elenco tramite un filtro che sembra performante (almeno in questo banale esempio fino a 10.000.000 di
Ryan Kimber

79

Ho dovuto implementare la paginazione parecchie volte con Angular, ed è sempre stato un po 'doloroso per qualcosa che pensavo potesse essere semplificato. Ho usato alcune delle idee presentate qui e altrove per creare un modulo di impaginazione che rende l'impaginazione semplice come:

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

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

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

Questo è tutto. Ha le seguenti caratteristiche:

  • Nessun codice personalizzato necessario nel controller per legare la raccolta itemsai collegamenti di impaginazione.
  • Non sei obbligato a utilizzare una tabella o una griglia: puoi impaginare tutto ciò che puoi ripetere!
  • Delegati a ng-repeat, in modo da poter utilizzare qualsiasi espressione che possa essere validamente utilizzata in un ng-repeat, inclusi filtri, ordini ecc.
  • Funziona su tutti i controller: la pagination-controlsdirettiva non ha bisogno di sapere nulla sul contesto in cui paginateviene chiamata la direttiva.

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

Per coloro che sono alla ricerca di una soluzione "plug and play", penso che questo sia utile.

Codice

Il codice è disponibile qui su GitHub e include una serie abbastanza buona di test:

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

Se sei interessato, ho anche scritto un breve pezzo con un po 'più di comprensione del design del modulo: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/


Ciao @michael bromley, sto provando con angularUtils. Ho aggiunto i file dirPangination.js e dirPagination.tpl.html al mio progetto. Ma ho iniziato a ricevere un errore del tipo "[$ compile: tpload] Impossibile caricare il modello: direttive / paginazione / dirPagination.tpl.html". Avevo provato a mettere questo file html nella cartella delle direttive del mio progetto. Ma non ho avuto successo. Ho i seguenti dubbi: 1. Dove mettere dirPagination.tpl.html nel progetto (Come sto usando ruby ​​su binari con Angularjs)?
Vieenay Siingh,

2
Bene, mi hai guadagnato al momento in cui ho letto che l'impaginazione poteva essere ovunque nella pagina :) Attualmente lo sto usando e funzionando senza problemi.
Diosney,

4
Questa è la migliore direttiva di paging là fuori per angolare. È probabilmente la soluzione più semplice per il paging che abbia mai visto. Sono stato attivo e cercavo più tabelle per vista ognuna con il proprio controllo di paging isolato in 15 minuti. Tutto con due righe di codice per file .jade. Tutto quello che posso dire è WOW. Eccezionale!
jrista,

6
Posso garantire la bellezza di questa direttiva, ho avuto una complessa ripetizione e non ha gestito alcun problema. Installazione semplicissima.
gkiely

1
Il tuo metodo "tracker ()" mi ha salvato la giornata. Stavo avendo un comportamento terribile e raro senza di esso.
Leopoldo Sanczyk,

63

Ho appena creato un JSFiddle che mostra l'impaginazione + ricerca + ordine su ogni colonna usando il codice btford: http://jsfiddle.net/SAWsA/11/


4
Grazie per il violino. È molto utile Domanda però: come implementeresti l'ordinamento sull'intero set di risultati invece di quello che c'è nella pagina corrente?
super9,

5
Si noti che l'ordinamento funziona solo sulla pagina corrente ... Non ordina l'intero array. L'impaginazione deve essere rifatta ogni volta che si cambia l'ordinamento
dgn

3
@Spir: Sì, la ricerca funziona, ma non l'ordinamento. Se si inverte l'ordinamento a pagina 1, viene riordinata solo questa pagina, anziché visualizzare gli articoli 9, 20 e co
dgn

1
@AleckLandgraf ho provato ad aggiungere $ scope.search ma ii non mostra ancora l'elenco ordinato corretto. per favore fatemi sapere cos'altro avete provato o aggiunto
anam

1
@simmisimmi @Spir @scenario c'è un bug nella parte inferiore del javascript: new_sorting_orderdovrebbe essere newSortingOrder. Risolvi il problema, aggiungi il @scope.search();e vedrai le cose ordinate come previsto e anche le icone di ordinamento si aggiornano. (Esegui il violino con la console di debug del browser aperta (in Chrome, F12, scheda console) ed è ovvio).
Dax Fohl,

15

Ho aggiornato il plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview di Scotty.NET in modo che utilizzi le versioni più recenti di angular, angular -ui e bootstrap.

controllore

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

});

Componente dell'interfaccia utente Bootstrap

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

questa soluzione aggiornata ha davvero soddisfatto le mie esigenze. Molte grazie.
Suraj Lama,

10

Questa è una soluzione javascript pura che ho racchiuso come servizio angolare per implementare la logica di impaginazione come nei risultati di ricerca di Google.

Demo funzionante su CodePen su http://codepen.io/cornflourblue/pen/KVeaQL/

Dettagli e spiegazioni in questo post del blog

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 <= 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 <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= 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
        };
    }
}

Ho usato il tuo approccio ma il problema è che se voglio usare gli indici per ordinare sulla pagina, viene sempre mostrato come 0-9 ...
Vaske

4

Ho estratto i bit rilevanti qui. Questo è un cercapersone tabulare "senza fronzoli", quindi l'ordinamento o il filtro non sono inclusi. Sentiti libero di cambiare / aggiungere secondo necessità:

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


4

Di seguito la soluzione abbastanza semplice.

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

Ecco un esempio di jsfiddle



3

Per chiunque abbia difficoltà come me a creare un paginatore per un tavolo, lo pubblico. Quindi, a tuo avviso:

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

Nei tuoi 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 <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);
              };
            });     

Ci sono state risposte con così tanti voti positivi e positivi .. ma nessuno ha funzionato per me .. ma questo combinato con la risposta di @svarog ha funzionato come un incantesimo per me.
Rai,


3

Da Angular 1.4, il limitTo filtro accetta anche un secondo argomento facoltativobegin

Dai documenti :

{{limitTo_expression | limitTo: limit: begin}}

inizio (facoltativo) stringa | numero
Indice da cui iniziare la limitazione. Come indice negativo, inizio indica un offset dalla fine dell'input. Il valore predefinito è 0.

Quindi non è necessario creare una nuova direttiva . Questo argomento può essere utilizzato per impostare l'offset dell'impaginazione

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

3

Puoi farlo facilmente usando la direttiva UI Bootstrap.

Questa risposta è una modifica della risposta data da @ Scotty.NET, ho cambiato il codice perché la <pagination>direttiva è obsoleta.

Il codice seguente genera l'impaginazione:

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

Per renderlo funzionale, utilizzare questo nel 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();

Fare riferimento a questo per ulteriori opzioni di impaginazione: Direttiva impaginazione dell'interfaccia utente Bootstrap


2

Impaginazione ng-repeat

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

1

I messaggi precedenti raccomandavano sostanzialmente come costruire un paging da soli. Se sei come me e preferisci una direttiva finita, ne ho appena trovata una fantastica chiamata ngTable . Supporta l'ordinamento, il filtro e l'impaginazione.

È una soluzione molto pulita, tutto ciò di cui hai bisogno a tuo avviso:

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

E nel 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 a GitHub: https://github.com/esvit/ng-table/


1

Angular-Paging

è una scelta meravigliosa

Una direttiva per facilitare il paging di set di dati di grandi dimensioni, pur richiedendo il minimo indispensabile di informazioni di paging effettive. Dipendiamo molto dal server per "filtrare" i risultati in questo schema di paging. L'idea centrale è che vogliamo solo mantenere la "pagina" attiva di elementi, anziché tenere l'intero elenco di elementi in memoria e il paging sul lato client.


1

Vecchia domanda, ma poiché ritengo che il mio approccio sia un po 'diverso e meno complesso, lo condividerò e spero che qualcuno oltre a me lo trovi utile.

Quello che ho trovato essere una soluzione semplice e piccola per l'impaginazione è combinare una direttiva con un filtro che utilizza le stesse variabili di ambito.

Per implementare questo, aggiungi il filtro sull'array e aggiungi la direttiva in questo modo

<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 e p_Step sono variabili dell'ambito che possono essere personalizzate nell'ambito altrimenti il ​​valore predefinito di p_Size è 5 e p_Step è 1.

Quando un passaggio viene modificato nella paginazione, p_Step viene aggiornato e attiverà un nuovo filtro mediante il filtro cust_pagination. Il filtro cust_pagination quindi suddivide l'array in base al valore p_Step come di seguito e restituisce solo i record attivi selezionati nella sezione impaginazione

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

DEMO Visualizza la soluzione completa in questo plunker


0

Ecco il mio esempio. Pulsante selezionato al centro nell'elenco Controller. config >>>

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

Logica per l'impaginazione:

/*
     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);
    });

e il mio punto di vista su 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 >

È utile


0

Vorrei poter commentare, ma dovrò lasciarlo qui:

La risposta di Scotty.NET e la ripetizione di user2176745 per le versioni successive sono entrambe fantastiche, ma mancano entrambe qualcosa su cui la mia versione di AngularJS (v1.3.15) si interrompe:

non è definito in $ scope.makeTodos.

Pertanto, la sostituzione con questa funzione lo risolve per le versioni angolari più recenti.

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

0

Panoramica : impaginazione utilizzando

 - ng-repeat
 - uib-pagination

Visualizza :

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

Controller JS :

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

}]);

0

Vorrei aggiungere la mia soluzione che funziona ngRepeate i filtri che usi con essa senza usare una $watcho una matrice affettata.

I risultati del tuo filtro verranno impaginati!

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

Nell'HTML assicurarsi di applicare i filtri ngRepeat prima del filtro di impaginazione.

<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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.