3

Como fazer uma paginação sob demanda com AngularJS? Eu tenho 2 particularidades:

1 - Não pode ser usado o jQuery, apenas o Angular ou JavaScript puro.

2 - Eu tenho 2 métodos o prevPage e nextPage. Abaixo exemplo dos métodos:

 $scope.prevPage = function(page){
    if($scope.currentPage-1 > 0){
        $scope.changePage(page);
    }
}

$scope.nextPage = function(page){
    if($scope.currentPage+1 <= $scope.numberOfPages){
        $scope.changePage(page);
    }
}

Aqui, para ficar mais visível, tem o HTML:

<ul class="pagination">
    <li class="glyphicon glyphicon-chevron-left" ng-click="prevPage(currentPage-1)" ng-class="{disabled: currentPage == 1}"></li>
    <li ng-repeat="i in numberOfPagesArr track by $index" ng-class="{active: $index+1 == currentPage}" ng-click="changePage($index+1)">{{$index+1}}</li>
    <li class="glyphicon glyphicon-chevron-right" ng-click="nextPage(currentPage+1)" ng-class="{disabled: currentPage == numberOfPages}"></li>
</ul>

Atualmente está funcionando, porém na página carrega somente 10 páginas de paginação, mas se aumentar o número com certeza irá quebrar.

Aqui tem um exemplo da paginação em questão de como quero fazer.

3
  • O que você quer é a parte das reticências quando há muitas páginas?
    – bfavaretto
    Commented 22/05/2014 às 18:08
  • Exatamente @bfavaretto!
    – Edmo
    Commented 22/05/2014 às 18:09
  • Para marcar o bfavaretto no seu comentário use o @ antes do nome assim @bfavaretto Commented 22/05/2014 às 18:13

3 Respostas 3

3

O que você precisa é o Angular-UI. Dentre outros componentes ele disponibiliza o Pagination.

Veja o objetivo do projeto:

Native AngularJS (Angular) directives for Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required!

Ou seje ele depende apenas do bootstrap.css. Toda a parte de comportamento dinâmico foi feita diretamente em JavaScript e Angular e não depende nem do jQuery nem do bootstrap.js.

1
  • Obrigado @JoaoParana estava vendo esse projeto :) E terei que fazer algumas modificações, mas ajudou pakas vlw!
    – Edmo
    Commented 28/05/2014 às 12:20
2
var c = sualistaEmJson;
$scope.totalPorPagina = 10;
$scope.totalRegistro = c.length;
$scope.pagina = [];
var p = $scope.totalRegistro > $scope.totalPorPagina ? Math.ceil($scope.totalRegistro / $scope.totalPorPagina) : 1;
for (var i = 0; i < p; i++) {
     $scope.pagina.push(c.splice(0, $scope.totalPorPagina));
}
$scope.lista = $scope.pagina[0];
insira o código aqui
//função chamada no ngClick;
$scope.loadListPagination = function (i) {
        $scope.lista = $scope.pagina[i];
    };
//HTML fica assim
<div ng-repeat="x in lista">
{{x}}
</div>
<nav ng-show="totalPorPagina < totalRegistro">
        <ul class="pagination">
            <li ng-repeat="p in pagina">
                <a href ng-click="loadListPagination($index)" style="background-color: #777;">
                    {{$index + 1}}
                </a>
            </li>
        </ul>
    </nav>
1
  • A sua resposta ficaria mais completa se tivesse uma pequena introdução/explicação e não apenas o código.
    – ramaral
    Commented 14/05/2015 às 13:09
-2

Aqui explico como fazer: https://guerrati.wordpress.com/2016/06/08/angularjs-paginacao-no-ng-repeat/

Basicamente é assim:

Utiliza o dirPaginate. Você precisa baixálo aqui, depois iniciá-lo na sua página:

<script src="dirPagination.js"></script>

E colocá-lo como dependência do seu módulo principal:

var app = angular.module('guerraTI', ['angularUtils.directives.dirPagination']);

Agora para ativar a paginação, basta substituir o ng-repeat pela diretiva dir-paginate. O único parâmetro que precisa ser adicionado é o itemsPerPage, que como o próprio nome já diz, é a quantidade de registros que serão mostrados em cada página.

<tr dir-paginate="dado in dados|filter:procurar|orderBy:sortKey:reverse|itemsPerPage:5">

Após isso, pode colocar os controles da paginação:

<dir-pagination-controls max-size="5" boundary-links="true"></dir-pagination-controls>
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .