Ng-table: Exemple avec le tri, le filtrage, le regroupement et la pagination côté serveur...

+1

+1

Salut, ng-table il ne s'agit que d'une bibliothèque cliente, une partie serveur que vous pouvez créer comme vous le souhaitez. Par exemple, vous pouvez regarder cette partie du code https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit - La demande concernait un exemple complet de la pagination, du tri, du regroupement, du filtrage, etc. des scénarios impliquent l'utilisation de cette bibliothèque cliente avec des données distantes...

@esvit oui, tout ce que nous voudrions, c'est quelque chose qui montre comment _devrait_ le faire, c'est-à-dire quel objet JSON ng-table attend ?

+1
Même si seulement un moyen d'intercepter les événements de filtrage, de tri et de pagination nous aiderait à connecter le reste au serveur... merci

grande bibliothèque d'ailleurs ...

+1

+1

+1

+1 s'il existe un bon moyen d'appeler une fonction personnalisée pour le tri, mais ce n'est pas nécessaire.

Soit mettez un ng-click="sort(vars,directionToggle)" dans l'en-tête et vous pouvez même laisser le tri activé. Il affichera alors les flèches correctement tant que votre bascule de direction correspond à sa bascule.
Le filtrage est légèrement plus compliqué, je dirais pour désactiver le filtrage ng-table et ajouter une entrée de filtre complètement personnalisée à l'en-tête, vous n'avez alors pas à vous soucier de l'intergénération ng-table.

À partir de là, il s'agit de gérer vos données principales et de vous assurer qu'elles vous envoient les bonnes données dans le bon ordre. Ensuite, branchez simplement ces données et bam, vous aurez une table de tri/filtrage ajax.

+1

Au cas où cela serait utile pour commencer, voici un exemple de pagination côté serveur. Le client envoie le numéro de page et la taille de la page au serveur, et le serveur renvoie les lignes de données uniquement pour cette page, ainsi que le nombre total de lignes sous forme d'en-tête de réponse.

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

J'espère que cela sera utile à quelqu'un.
donut de renard

+1

+1

+1

très bien

Je sais qu'il est un peu tard, mais quelqu'un a fait un très bon exemple d'affichage de données triées côté serveur :
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

Je ne savais pas qu'on pouvait faire ça. Ce n'est pas si clair dans la documentation. :(

Salut foxdonut,
Votre commentaire aide vraiment, mais comme je suis nouveau, peu de choses ne sont pas claires pour moi
1# Pourquoi receiveData est passé en tant qu'argument dans une fonction.
Quand j'appelle ma fonction ajax au lieu de
MyResource.query(queryParams, receiveData);
il affiche des données mais comme ajax revient plus tard, le compte n'est pas actualisé. Et si j'utilise reload dans le code ajax, il passe en boucle infinie :(

Salut @rbhargava25

Pourquoi receiveData est passé en tant qu'argument dans une fonction.

Parce que MyResource.query est une fonction asynchrone. Il fait une requête au serveur, et lorsque la réponse revient, nous devons savoir quel code exécuter. Dans ce cas, il s'agit d'appeler la _fonction de rappel_, qui vaut receiveData .

J'espère que cela pourra aider.

Grand merci Foxdonut...
J'utiliserai une simple requête http au lieu de Resource, j'espère que cela fonctionnera.