Ng-table: Exemplo com classificação, filtragem, agrupamento e paginação do lado do servidor ...

+1

+1

Olá, ng-table, esta é apenas a biblioteca cliente, parte do servidor que você pode fazer como desejar. Por exemplo, você pode olhar esta parte do código https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit - A solicitação era para um exemplo completo de ng-table manipulando paginação do lado do servidor, classificação, agrupamento, filtragem, etc, etc. Eu concordo que ng-table é uma biblioteca cliente, mas tal exemplo realmente ajudaria porque muito de cenários envolvem o uso desta biblioteca cliente com dados remotos ...

@esvit sim, tudo o que gostaríamos é algo que mostre como _deve_ fazer isso, ou seja, o que o objeto ng-table JSON espera?

+1
Mesmo que apenas uma forma de interceptar os eventos de clique de filtragem, classificação e paginação nos ajudaria a conectar o resto ao servidor ... obrigado

ótima biblioteca aliás ...

+1

+1

+1

+1 se houver uma boa maneira de chamar uma função personalizada para classificação, mas não for necessária.

Coloque um ng-click = "sort (vars, directionToggle)" no cabeçalho e você pode até deixar a classificação habilitada. Em seguida, ele exibirá as setas adequadamente, desde que a sua alternância de direção corresponda a esta alternância.
A filtragem é um pouco mais complicada, eu diria para desabilitar a filtragem da tabela ng e adicionar uma entrada de filtro totalmente customizada ao cabeçalho, então você não precisa se preocupar com a intergeração da tabela ng.

A partir daí, trata-se de lidar com os dados de back-end e garantir que eles enviem os dados corretos na ordem correta. Em seguida, basta conectar esses dados e bam, você terá uma tabela de classificação / filtragem ajax.

+1

Caso seja útil para começar, aqui está um exemplo de paginação do lado do servidor. O cliente envia o número da página e o tamanho da página ao servidor, e o servidor retorna as linhas de dados apenas para aquela página e o número total de linhas como um cabeçalho de resposta.

    $scope.tableParams = new ngTableParams({
      page: 1, count: 10
    }, {
      getData: function($defer, params) {
        var receiveData = function(data, responseHeaders) {
          // in my case, the server returns the total number of rows as a response header
          // call params.total(...) to tell ng-table the total number of rows
          params.total(responseHeaders("count"));

          // the server returns just the data for the current page, so can send it as is
          $defer.resolve(data);
        };

        // getData gets called when you click on a different page in the pagination links.
        // get the page number and size from params.$params
        var pageNumber = params.$params.page;
        var pageSize = params.$params.count;

        // set up the query parameters as expected by your server
        var queryParams = {"paging.pageSize":pageSize, "paging.pageNumber":pageNumber};

        // send an ajax request to your server. in my case MyResource is a $resource.
        MyResource.query(queryParams, receiveData);
      }
    });

Espero que isso seja útil para alguém.
foxdonut

+1

+1

+1

muito bom

Eu sei que é um pouco tarde, mas alguém deu um exemplo realmente bom de exibição de dados classificados do lado do servidor:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

Eu não sabia que poderíamos fazer isso. Isso não está tão claro na documentação. :(

Oi foxdonut,
Você comenta realmente ajuda plena, mas como sou nova poucas coisas não ficam claras para mim
1 # Por que receiveData está sendo passado como um argumento para uma função.
Quando estou chamando minha função ajax em vez de
MyResource.query (queryParams, receiveData);
está mostrando dados, mas como ajax retorna mais tarde, a contagem não está sendo atualizada. E se eu estiver usando reload dentro do código ajax, ele vai para o loop infinito :(

Olá @ rbhargava25

Por que receiveData está sendo passado como um argumento para uma função.

Porque MyResource.query é uma função assíncrona. Ele está fazendo uma solicitação ao servidor e, quando a resposta voltar, precisamos saber qual código executar. Nesse caso, é para chamar a _função de retorno_, que é receiveData .

Espero que ajude.

Muito obrigado Foxdonut ...
Vou usar uma solicitação simples de http em vez de Recurso. Estou esperando que funcione.