Usuário com melhor resposta
Paginação com AngularJS e WebAPI

Pergunta
-
Preciso fazer uma paginação usando
AngularJS
. Bem, fiz uma controller para popular umaTable HTML
. Isso agora tá funcionando. O meu próximo passo será paginar essa table. Peguei um exemplo na internet, só que o exemplo o cara faz um for de 1 até 1000 e sai paginando. No meu caso é diferente, eu recebo umJSON
do meuREST
e necessito paginar isso, separa em bloco de 10, como eu recebo 40 registros serializados, daria 4 páginas de 10. Fiz uma controller.js somente para isso, é o certo, para separar bem. Cada caso um caso. Abaixo a minha controller:var pagina = angular.module('app', []); pagina.controller("PaginacaoController", function ($scope) { $scope.filteredTodos = [] , $scope.currentPage = 1 , $scope.numPerPage = 10 , $scope.maxSize = 5; $scope.makePagina = function () { $scope.pagina = []; for (i = 1; i <= 1000; i++) { $scope.pagina.push({ text: "Teste " + i, done: false }); } }; $scope.makePagina(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredPagina = $scope.pagina.slice(begin, end); }); })
Tenho duas dúvidas aí:
1) Na segunda function(), a do for, creio que eu devo colocar um data e pegar o data.items(dessa forma eu pego o
JSON
para popular a table), masdata.items.length
, não funfa, comigo deu erro.2) Veja que
$scope.numPerPage
está fixo em 10, mas nesse caso não sei quantos registros vêm e a paginação deveria ser dinâmica.Abaixo a minha view, que hoje funciona para popular a table:
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Tipo Contato Operadora</h2> <div data-ng-controller="TipoContatoOperadoraController"> <div class="panel panel-default"> <div class="panel-heading">Lista de Tipo de Contato das Operadoras</div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <strong>{{erro}}</strong> </div> </div> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table table-bordered table-hover"> <tr> <th>Cod. Tipo Contato</th> <th>Nome Tipo Contato</th> <th>Ind. Tipo Contato</th> <th>Data Atualização</th> <th>Cod. Usuário</th> </tr> <tr data-ng-repeat="lista in listaTipoContatoOperadora"> <td>{{ lista.id }}</td> <td>{{ lista.nome }}</td> <td>{{ lista.tipoContato }}</td> <td>{{ lista.dataUltimaAtualizacao }}</td> <td>{{ lista.loginUltimaAtualizacao }}</td> </tr> </table> </div> </div> </div> </div> </div> </div>
Respostas
-
EDIÇÃO 4
Consegui fazer o slice com esse código. Só não estou conseguindo trazer os botões de navegação entre as páginas:
var app = angular.module('app', []); app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]) function TipoContatoOperadoraController($scope, $http) { $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora') .success(function (data) { $scope.filteredPagina = [] , $scope.currentPage = 1 , $scope.maxSize = 5 , $scope.numPerPage = data.items.length / $scope.maxSize; $scope.listaTipoContatoOperadora = data.items; $scope.makePagina = function () { $scope.app = []; for (i = 1; i <= data.items.length; i++) { $scope.app.push({ text: "Página " + i, done: false }); } }; $scope.makePagina(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end); }); }) .error(function () { //$scope.dt = 'Teste: ' + $scope.data; $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.'; }); }
E minha view(apenas as TD's) ficou assim:
<tr data-ng-repeat="lista in filteredPagina"> <td>{{ lista.id }}</td> <td>{{ lista.nome }}</td> <td>{{ lista.tipoContato }}</td> <td>{{ lista.dataUltimaAtualizacao }}</td> <td>{{ lista.loginUltimaAtualizacao }}</td> </tr>
Apenas alterei o foreach para a(s) página(s) filtrada(s)
- Marcado como Resposta pnet quarta-feira, 13 de julho de 2016 12:23
Todas as Respostas
-
Se coloco duas controller, a minha view se perde. A Controller atual para receber o
JSON
é essa. Preciso a da paginação ou colocar a paginação dentro dessa.
var app = angular.module('app', []); app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]) function TipoContatoOperadoraController($scope, $http) { $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora') .success(function (data) { $scope.listaTipoContatoOperadora = data.items; }) .error(function () { //$scope.dt = 'Teste: ' + $scope.data; $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.'; }); }
Ficou assim minha controller e mesmo assim não pagina:
var app = angular.module('app', []); app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]) function TipoContatoOperadoraController($scope, $http) { $scope.filteredTodos = [] , $scope.currentPage = 1 , $scope.numPerPage = 10 , $scope.maxSize = 5; $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora') .success(function (data) { $scope.listaTipoContatoOperadora = data.items; $scope.makePagina = function (data) { $scope.pagina = []; for (i = 1; i <= data.items.lehgth; i++) { $scope.msg = "Teste " + i; $scope.pagina.push({ text: "Teste " + i, done: false }); } }; $scope.makePagina(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredPagina = $scope.pagina.slice(begin, end); }); }) .error(function () { //$scope.dt = 'Teste: ' + $scope.data; $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.'; }); }
Fiz essa alteração e funcionou. O que faltou foi o AngularJS-UI e o CSS ou Bootstrap, montar a navegação das páginas, mas isso funcionou.
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora') .success(function (data) { $scope.filteredTodos = [] , $scope.currentPage = 1 , $scope.maxSize = 5 , $scope.numPerPage = data.items.length / $scope.maxSize; $scope.listaTipoContatoOperadora = data.items; var t = data.items.length; console.log(t); $scope.makePagina = function () { $scope.pagina = []; for (i = 1; i <= data.items.length; i++) { $scope.pagina.push({ text: "Página " + i, done: false }); } }; $scope.makePagina(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredPagina = $scope.pagina.slice(begin, end); }); }) .error(function () { //$scope.dt = 'Teste: ' + $scope.data; $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.'; });
- Editado pnet terça-feira, 12 de julho de 2016 19:25
-
-
EDIÇÃO 4
Consegui fazer o slice com esse código. Só não estou conseguindo trazer os botões de navegação entre as páginas:
var app = angular.module('app', []); app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]) function TipoContatoOperadoraController($scope, $http) { $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora') .success(function (data) { $scope.filteredPagina = [] , $scope.currentPage = 1 , $scope.maxSize = 5 , $scope.numPerPage = data.items.length / $scope.maxSize; $scope.listaTipoContatoOperadora = data.items; $scope.makePagina = function () { $scope.app = []; for (i = 1; i <= data.items.length; i++) { $scope.app.push({ text: "Página " + i, done: false }); } }; $scope.makePagina(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end); }); }) .error(function () { //$scope.dt = 'Teste: ' + $scope.data; $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.'; }); }
E minha view(apenas as TD's) ficou assim:
<tr data-ng-repeat="lista in filteredPagina"> <td>{{ lista.id }}</td> <td>{{ lista.nome }}</td> <td>{{ lista.tipoContato }}</td> <td>{{ lista.dataUltimaAtualizacao }}</td> <td>{{ lista.loginUltimaAtualizacao }}</td> </tr>
Apenas alterei o foreach para a(s) página(s) filtrada(s)
- Marcado como Resposta pnet quarta-feira, 13 de julho de 2016 12:23