Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Paginação no Back-end

Como podemos aplicar o FILTER para uma consulta no qual o back-end possui limites de dados. Exemplo: se o backend retornar 10 dados (limite por página), o filter só funcionará para os dados previamente carregados e não realiza uma nova consulta no banco de dados.

4 respostas

Tanto o lado da aplicação Angular quando seu servidor precisaram implementar um algoritmo de paginação. Não dá para resolver só em uma das pontas. Esse algoritmo pode ser implementado de diversas formas, mas é verboso e você precisa criar várias estruturas de controle.

A boa notícia é que no lado do Angular, você pode usar um componente criado por terceiros que realiza a paginação para você. Já no seu backend, terá que alterá-lo para se adequar aos parâmetros de que o componente necessita.

Existem vários componentes prontos para isso. Segue um específico do Angular.

https://www.npmjs.com/package/ng-pagination

Ou você pode tentar fazer escrevendo sua própria lógica, como já tentaram aqui:

http://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs

O problema não é o algoritmo de paginação, o problema é o FILTRO. Vou tentar ser mais claro: - Tenho um backend que filtra objetos por nome e retorna 10 dados por vez; - O angular carrega os DEZ objetos e renderiza em uma tabela ( tr com ng-repeat); - Se aplicarmos o filtro do angular, qndo digitamos o nome Thiago, o filtro age nos DEZ objetos previamente carregados; - E os outros objetos com nome Thiago que estão do lado backend? - Estou realizando a busca com o ng-keyup dentro do input (portanto o FILTER não está sendo aplicado aqui) , porém não consigo utilizar o debounce do Angular com a diretiva ng-keyup, o que faz com que haja várias consultas desnecessárias no servidor, mas ainda não consegui encontrar a solução.

Você diz que o debounce do ng-model-options não funciona. Ele resolve o problema de não metralhar seu server a cada digito. No entanto ainda deve haver paginação, mas essa parte eu entendi que você já implementou.

Cole o código da sua app para que todos possam olhar aqui.

O filter é para client side filtering. Não para server side pagination.

Você pode fazer igual ao google, buscando apenas se o usuário der ENTER usando sua lógica de paginação.

solução!

Problema resolvido com o $watch ; Eis aqui o meu controller, lembrando que os dados retornados do Backend já vem com a paginação correta. No $scope.filtro eu posso acrescentar dinamicamente os dados que eu quero filtrar (nome, descricao, data, etc.)... os dados estão vindo redondinhos e paginados.

app.controller('BuscaCtrl', function($scope, httpServiceAPI, $route){

    var page = ($route.current.page);

    $scope.pagina = {};
    $scope.filtro = {
        page: 0
    };

    $scope.$watch('filtro', function() {
        loadDataTable();
    }, true);

    var loadDataTable = function(){
        httpServiceAPI.get(page + '/busca.json', $scope.filtro).then(
                function(response){
                    $scope.pagina = response.data;
                }
            );
    }

    $scope.buscar = function(){
        $scope.filtro.page = 0;
        loadDataTable();
    }

    $scope.setPage = function(index){
        $scope.filtro.page = index;
        loadDataTable();
    }

    $scope.incrementPage = function(){
        if(! $scope.pagina.last){
            $scope.filtro.page++;
            loadDataTable();
        }
    }

    $scope.decrementPage = function(){
        if(! $scope.pagina.first){
            $scope.filtro.page--;
            loadDataTable();
        }
    }

    $scope.excluir = function(id , object){
        swal({
            title: 'Tem certeza?',
            text: 'Se excluir "' + object + '", não poderá recuperar depois.',
            type: "warning",
            showCancelButton: true,
            confirmButtonText: 'Sim, exclua agora!',
            closeOnConfirm: false
        }, onExluirConfirmado );

        function onExluirConfirmado(){
            httpServiceAPI.delete(page+'/'+id).then(onExcluidoSucesso, onErroExcluir);
        }

        function onExcluidoSucesso() {
            swal('Pronto!', 'Excluído com sucesso!', 'success');
            loadDataTable();
        }

        function onErroExcluir(response) {
            swal('Oops!', response.responseText, 'error');
        }

    }

    //loadDataTable();
});