none
Paginação com AngularJS e WebAPI RRS feed

  • Pergunta

  • Preciso fazer uma paginação usando AngularJS. Bem, fiz uma controller para popular uma Table 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 um JSON do meu REST 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), mas data.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>
    terça-feira, 12 de julho de 2016 16:58

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
    terça-feira, 12 de julho de 2016 20:44

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
    terça-feira, 12 de julho de 2016 17:56
  • Funcionou que eu quero dizer é mostrar os textos das páginas, mas ainda tenho muito trabalho a fazer. Mas fazer outro post agora para o slice do JSON.
    terça-feira, 12 de julho de 2016 19:31
  • 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
    terça-feira, 12 de julho de 2016 20:44