Como fazer paginação no AngularJS?


254

Eu tenho um conjunto de dados de cerca de 1000 itens na memória e estou tentando criar um pager para esse conjunto de dados, mas não tenho certeza de como fazer isso.

Estou usando uma função de filtro personalizada para filtrar os resultados, e isso funciona bem, mas de alguma forma eu preciso obter o número de páginas.

Alguma pista?


Respostas:


285

Bootstrap de interface de usuário angular - diretiva de paginação

Confira UI Bootstrap 's directiva paginação . Acabei usando-o em vez do que é postado aqui, pois possui recursos suficientes para o meu uso atual e possui uma especificação de teste completa para acompanhá-lo.

Visão

<!-- table here -->

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

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

Controlador

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

Eu fiz um plunker de trabalho para referência.


Versão herdada:

Visão

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

Controlador

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

Eu fiz um plunker de trabalho para referência.


2
agradável e elegante. Poderia ser melhorado adicionando uma ordenação
Carlos Barcelona

3
O atributo num-pages não é mais necessário e é somente leitura. Não há necessidade de passar numPages. Consulte os documentos: angular-ui.github.io/bootstrap/#/pagination
kvetis

3
RESOLVIDO: itens por página é a propriedade que precisa ser definida no paginationelemento.
Bogac

1
^^^^ Para todos os novos leitores, veja o comentário de Bogacs: itens por página agora são necessários no elemento de paginação. Não funciona sem ele.
IfTrue

14
<paginação> agora está obsoleta. Use <uib-pagination> em vez disso.
Mnm 14/10

88

Eu recentemente implementei a paginação para o site Built with Angular. Você pode consultar a fonte: https://github.com/angular/builtwith.angularjs.org

Eu evitaria usar um filtro para separar as páginas. Você deve dividir os itens em páginas dentro do controlador.


61
A solução está espalhada por vários arquivos. Você precisa procurar pelo menos o controlador e a visualização. Eu não vejo como isso garante uma downvote:Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
btford

2
Você pode começar a ver a <div class = "pagination"> de index.html github.com/angular/builtwith.angularjs.org/blob/master/…
Jorge Nunez Newton

6
@btford Por que você evitaria usar um filtro?
CWSpear

4
Votei para neutralizar a votação anterior, porque achava que o pôster fornecia um exemplo de qualidade que pode ser usado para responder à pergunta original.
RachelD

1
@btford Ainda é uma má idéia paginar usando um filtro? Aqui está uma plunkr pagina uma lista através de um filtro que parece performance (pelo menos neste exemplo trivial até 10 000 000 linhas): embed.plnkr.co/iWxWlCEvd6Uh8erUOyaF
Ryan Kimber

79

Eu tive que implementar a paginação algumas vezes com o Angular, e sempre foi um pouco doloroso para algo que eu achava que poderia ser simplificado. Eu usei algumas das idéias apresentadas aqui e em outros lugares para criar um módulo de paginação que torna a paginação tão simples quanto:

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

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

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

É isso aí. Possui os seguintes recursos:

  • Nenhum código personalizado é necessário no seu controlador para vincular a coleção itemsaos links de paginação.
  • Você não é obrigado a usar uma tabela ou grade - você pode paginar qualquer coisa que puder repetir com ng!
  • Delega para ng-repeat, para que você possa usar qualquer expressão que possa ser usada validamente em ng-repeat, incluindo filtragem, pedido etc.
  • Funciona entre controladores - a pagination-controlsdiretiva não precisa saber nada sobre o contexto em que a paginatediretiva é chamada.

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

Para quem procura uma solução "plug and play", acho que você achará isso útil.

Código

O código está disponível aqui no GitHub e inclui um bom conjunto de testes:

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

Se você estiver interessado, também escrevi um pequeno artigo com um pouco mais de informações sobre o design do módulo: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/


Oi @michael bromley, estou tentando com angularUtils. Adicionei os arquivos dirPangination.js e dirPagination.tpl.html ao meu projeto. Mas comecei a receber um erro como "[$ compile: tpload] Falha ao carregar o modelo: diretivas / paginação / dirPagination.tpl.html". Eu tentei colocar esse arquivo html na pasta de diretivas do meu projeto. Mas não tive sucesso. Tenho as seguintes dúvidas: 1. Onde colocar dirPagination.tpl.html no projeto (Como estou usando ruby ​​on rails com Angularjs)?
Vieenay Siingh 10/10

2
Legal, você me ganhou no momento em que li que a paginação poderia estar em qualquer lugar da página :) Atualmente, usando-a e funcionando sem problemas.
Diosney

4
Esta é a melhor diretiva de paginação existente para angular. É provavelmente a solução mais simples para paginação que eu já vi. Eu estava de pé e paginando várias tabelas por exibição, cada uma com seu próprio controle de paginação isolado em 15 minutos. Tudo com duas linhas de código por arquivo .jade. Tudo o que posso dizer é WOW. Impressionante!
jrista

6
Posso garantir a grandiosidade desta diretiva, tive uma repetição ng complexa e ela lidou com isso sem problemas. Configuração super fácil.
gkiely

1
Seu método "tracker ()" salva meu dia. Eu estava tendo um comportamento terrível e raro sem ele.
Leopoldo Sanczyk

63

Acabei de criar um JSFiddle que mostra paginação + pesquisa + ordem em cada coluna usando o código btford: http://jsfiddle.net/SAWsA/11/


4
Obrigado pelo violino. É muito útil. Pergunta: como você implementaria a classificação em todo o conjunto de resultados em vez do que está na página atual?
super9

5
Observe que a classificação funciona apenas na página atual ... Não classifica toda a matriz. A paginação tem que ser toda refeita você alterar a ordem de classificação
dgn

3
@ Sppir: Sim, a pesquisa funciona, mas não a classificação. Se você reverter a classificação na página 1, só que desta página é reordenada, em vez de exibir os itens 9, 20 e co
DGN

1
@AleckLandgraf eu tentei adicionar $ scope.search, mas ii ainda não está mostrando a lista classificada correta. por favor, deixe-me saber o que mais você experimentou ou adicionou #
17/14

1
@simmisimmi @Spir @scenario há um bug na parte inferior do javascript: new_sorting_orderdeveria ser newSortingOrder. Corrija isso, adicione o @scope.search();, e você verá as coisas classificar conforme o esperado, e os ícones de classificação também serão atualizados. (Execute o violino com o console de depuração do navegador aberto (no chrome, F12, guia console) e é óbvio).
Dax Fohl

15

Eu atualizei Scotty.NET de plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview para que ele usa versões mais recentes do angular, angular-ui, e de bootstrap.

Controlador

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 de interface do usuário de inicialização

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

esta solução atualizada realmente atendeu às minhas necessidades. Muito obrigado.
Suraj Lama

10

Esta é uma solução javascript pura que envolvi como um serviço Angular para implementar a lógica de paginação, como nos resultados de pesquisa do Google.

Demonstração de trabalho no CodePen em http://codepen.io/cornflourblue/pen/KVeaQL/

Detalhes e explicações nesta postagem do 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
        };
    }
}

Eu usei sua abordagem mas o problema é se eu quiser usar o índice-es para ordenação na página, é sempre mostrado como 0-9 ...
vaske

4

Eu extraí os bits relevantes aqui. Este é um pager tabular 'sem frescura', portanto, a classificação ou a filtragem não estão incluídas. Sinta-se à vontade para alterar / adicionar conforme necessário:

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

Abaixo solução bastante simples.

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

Aqui está o exemplo jsfiddle



3

Para quem acha difícil criar um paginador para uma tabela, eu posto isso. Então, na sua opinião:

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

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

Houve respostas com tantos votos positivos e positivos .. mas nenhum funcionou para mim .. mas este combinado com a resposta de @svarog funcionou como um encanto para mim.
Rai


3

Desde o Angular 1.4, o limitTofiltro também aceita um segundo argumento opcionalbegin

Dos documentos :

{{limitTo_expression | limitTo: limit: begin}}

begin (opcional) string | number
Índice no qual iniciar a limitação. Como um índice negativo, begin indica um deslocamento do final da entrada. O padrão é 0.

Portanto, você não precisa criar uma nova diretiva . Esse argumento pode ser usado para definir o deslocamento da paginação

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

3

Você pode fazer isso facilmente usando a diretiva de interface do usuário do Bootstrap.

Esta resposta é uma modificação da resposta dada pelo @ Scotty.NET. Alterei o código porque a <pagination>diretiva está obsoleta agora.

O código a seguir gera a paginação:

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

Para torná-lo funcional, use isso no seu controlador:

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

Consulte isso para obter mais opções de paginação: Diretiva de paginação da interface do usuário do Bootstrap


2

paginação repetida por ng

    <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

As mensagens anteriores recomendavam basicamente como criar uma paginação por si mesmo. Se você é como eu e prefere uma diretiva pronta, acabei de encontrar uma excelente chamada ngTable . Ele suporta classificação, filtragem e paginação.

É uma solução muito limpa, tudo que você precisa em sua opinião:

   <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 no controlador:

$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 para o GitHub: https://github.com/esvit/ng-table/


1

Paginação angular

é uma escolha maravilhosa

Uma diretiva para ajudar na paginação de grandes conjuntos de dados, exigindo o mínimo de informações reais de paginação. Somos muito dependentes do servidor para "filtrar" os resultados nesse esquema de paginação. A idéia central é que apenas queremos manter a "página" ativa dos itens - em vez de manter a lista inteira de itens na memória e paginar no lado do cliente.


1

Pergunta antiga, mas como acho que minha abordagem é um pouco diferente e menos complexa, compartilharei isso e espero que alguém além de mim ache útil.

O que eu achei uma solução fácil e pequena para paginação é combinar uma diretiva com um filtro que usa as mesmas variáveis ​​de escopo.

Para implementar isso, adicione o filtro na matriz e adicione o diretório assim

<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 são variáveis ​​de escopo que podem ser personalizadas no escopo; caso contrário, o valor padrão de p_Size é 5 e p_Step é 1.

Quando uma etapa é alterada na paginação, o p_Step é atualizado e aciona uma nova filtragem pelo filtro cust_pagination. O filtro cust_pagination divide a matriz de acordo com o valor p_Step como abaixo e retorna apenas os registros ativos selecionados na seção paginação

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

DEMO Veja a solução completa neste plunker


0

Aqui está o meu exemplo. Botão selecionado no meio da lista Controlador. config >>>

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

Lógica para paginação:

/*
     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 minha visão sobre boottap

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

É útil


0

Eu gostaria de poder comentar, mas vou ter que deixar isso aqui:

A resposta do Scotty.NET e o refazer do user2176745 para versões posteriores são ótimos, mas ambos perdem algo que minha versão do AngularJS (v1.3.15) interrompe:

i não está definido em $ scope.makeTodos.

Como tal, a substituição por esta função o corrige nas versões angulares mais recentes.

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

0

Visão geral : paginação usando

 - ng-repeat
 - uib-pagination

Ver :

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

Controlador 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

Gostaria de adicionar minha solução que funciona com ngRepeatfiltros e que você usa com ela sem usar uma $watchou uma matriz fatiada.

Os resultados do seu filtro serão paginados!

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

No HTML, certifique-se de aplicar seus filtros ngRepeat antes do filtro de paginação.

<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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.