Ng-table: tableParams.reload() ne recharge pas les données du filtre

Créé le 27 janv. 2014  ·  30Commentaires  ·  Source: esvit/ng-table

j'utilise tableParams.reload() (et params.total(filteredData.length)) qui recharge la table avec les nouvelles données externes, mais les sélections dans les filtres "select" et "select-multiple" ne changent pas. tableParams.reload() devrait appeler à nouveau les fonctions "filter-data", non ? y a-t-il une autre façon d'accomplir cela?

Commentaire le plus utile

Mes données sont chargées avec succès sur DOM, mais lorsque je récupère les données du serveur et que je souhaite actualiser la table ng par tableParams.reload(), cela ne reflète pas le résultat, mais lorsque je clique sur le tri ou la pagination, cela reflète le résultat.
quel problème peut être cela?

Tous les 30 commentaires

Salut. Tout d'abord - merci pour le projet.
J'ai le même problème. J'ai besoin de mettre à jour les filtres avec les données extraites d'un serveur, mais je ne sais pas comment déclencher la fonction filter-data.

J'ai trouvé que si vous déclarez vos données directement dans la fonction getData, cela semble mettre à jour la table.
Donc..... getData: function($defer, params){
var data = $scope.yourdata;
varDonnéesOrdonnées = ...............................
}

Mes données sont chargées avec succès sur DOM, mais lorsque je récupère les données du serveur et que je souhaite actualiser la table ng par tableParams.reload(), cela ne reflète pas le résultat, mais lorsque je clique sur le tri ou la pagination, cela reflète le résultat.
quel problème peut être cela?

J'aimerais appuyer ce que

J'ai eu le même problème avec @developersatish.
Attendez une résolution de ce problème.

Salut à tous. J'ai récemment commencé à utiliser ngTable. J'ai un problème similaire, en particulier avec les ngTables imbriquées et le rechargement des données séparément des données parent. voici une idée rapide :

contrôleur parent :

var ParentData = [...];

$scope.details = -1

$scope.showDetails = fonction (id) {
$scope.details = id;
} ;

// ngTable ////////
$scope.tableParams = new ngTableParams({
page : 1, // afficher la première page
compte : 10, // compte par page
tri : {
id: 'asc' // tri initial
}
}, {
total : parentData.length, // longueur des données
getData : function($defer, paramètres) {
// utilise le filtre angulaire intégré
vardonnées ordonnées = params.sorting() ?
$filter('orderBy')(parentData, params.orderBy()) :
parentData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

sur le html, j'ai un ng-clic pour envoyer l'identifiant à cela et modifier la portée des détails.

Contrôleur enfant (tableau secondaire qui se rapporte au premier contrôleur) :

var childData = [...];

$scope.$parent.$watch('details', function () {
console.log("vous avez réussi ici");
$scope.tableParams2.reload();
});

// ngTable enfant ////////
$scope.tableParams2 = new ngTableParams({
page : 1, // afficher la première page
compte : 10, // compte par page
tri : {
id: 'asc' // tri initial
}
}, {
total : childData.length, // longueur des données
getData : function($defer, paramètres) {
// utilise le filtre angulaire intégré
vardonnées ordonnées = params.sorting() ?
$filter('orderBy')(childData, params.orderBy()) :
childData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$portée : { $données : {} }
});

Je peux voir le changement lorsque je clique mais ma table enfant ne se met pas à jour. Je ne sais pas si cela aide, mais je pense que c'est lié.

Salut,
J'ai également les mêmes problèmes que @developersatish. Les données du tableau ne sont mises à jour qu'après avoir trié ou filtré le tableau. Existe-t-il une solution à ce problème ?

J'ai un problème similaire.

Lors d'un événement de clic, je commence à récupérer les données d'un serveur (appels multiples).
J'ai donc une boucle for et j'y ai des requêtes GET et je stocke les résultats qui retournent dans une variable de portée que je veux tracer dans une table asynchrone.

Cependant au clic j'instancier ma table ainsi :

`$scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            Country: 'asc' // initial sorting
        }
    }, {
        total: $scope.continentTableData.length, // length of data
        getData: function($defer, params) {
            for (var i = 0; i < numberOfCountries; i++) {
                try {
                    var country = $("path[class*=" + $scope.currentContinentCountries[i].toUpperCase() + "]")[0].__data__.properties.name;
                    MapService.getInfographicsData(2013, country, function(infrographicsData) {
                        counter++;
                        // debugger;
                        var cpi = infrographicsData[0].data.CPI;
                        var trace = infrographicsData[1].data;
                        var countryName;

                        if (cpi == null) {
                            countryName = trace.Ref_Country;
                        } else {
                            countryName = cpi.Country;
                        }

                        var joinedData = {
                            Country: countryName,
                            Cpi: cpi,
                            Trace: trace
                        }
                        $scope.continentData.push(joinedData);

                        $scope.continentTableData = $scope.continentData;

                        // if (counter==numberOfCountries-1) {
                        //     console.log("tier");
                            $timeout(function() {
                            // update table params
                            params.total($scope.continentTableData.length);
                            // set new data
                            console.log("new data set");
                            $defer.resolve($scope.continentTableData);
                        }, 1500);
                        // };

                    });
                } catch (e) {
                    // console.log(e);
                    continue;
                }                    
            }

            // $scope.$apply();
        }
    });`

comme dans l'exemple ngTable avec ajax. Cependant, rien n'est affiché dans la table (getData n'est jamais appelé.)

Si je clique sur "Actualiser" tableParams, la table commence à tout charger, sauf que chaque élément est dupliqué.

Une idée?

@developersatish J'ai pu refléter les nouvelles données du serveur en copiant la fonctionnalité attachée aux boutons de pagination.

$scope.tableParams.count(1);

J'ai placé cela dans le rappel de ma demande.

myRequest().then(function(response) {
    $scope.data = response;
    $scope.tableParams.total($scope.data.length);
    $scope.tableParams.count(1);
});

Éditer:

Dans mon message d'origine, le 1 dans $scope.tableParams.count(1) devrait en fait être remplacé par une variable qui contient la valeur définie sur count dans ngTableParams .
Voir http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview pour un exemple de travail.

Comme il s'agit du premier résultat de recherche pour ce problème, j'inclurai ce que j'ai fait pour ma solution. J'ai simplement stocké dans mon $scope le tableau d'objets {id,title} qui est utilisé comme argument du defer.resolve dans la fonction filter-data. (il pourrait être / est probablement vide au départ.) Vous pouvez ensuite mettre à jour ce tableau à tout moment et les modifications seront reflétées dans la sélection de filtre. Je le mets donc à jour lorsque mon appel ajax ramène la réponse du serveur.

Dans mon cas également, l'ensemble de données du tableau s'étend (est augmenté) à mesure que l'utilisateur étend la plage de recherche. Cela nécessite que je modifie également (applique un diff à) les filtres de sélection.

J'ai essayé ça mais ça ne marche pas. Pouvez-vous coller votre exemple de travail ?

Salut les gars,
J'ai le même problème que @almaplayera , j'ai un scénario comme

1. Les données de filtrage utilisées dans la liste déroulante proviennent du service

2. Et pour mettre à jour les mêmes données, j'ai une section à partir de laquelle l'utilisateur peut ajouter de nouvelles entrées / mettre à jour l'existant.

3. Après avoir ajouté/mis à jour les entrées de la section ajouter/modifier les données de filtrage pour la liste déroulante, cette liste déroulante doit être actualisée une fois la table en cours de rechargement.

Je fais cela pour que les données de mon entreprise filtrent les données -

screen4ngtable

Après cela, j'ai appelé la méthode getCompany dans les données de filtrage de mon point de vue -

screen5ngtable

Quelqu'un peut-il s'il vous plaît suggérer des solutions pour mettre à jour mes données de filtrage avec les données récentes du service ou fournir des exemples pour des cas d'utilisation similaires.

@esvit : j'ai essayé d'obtenir mes données au rappel getData dans ngTablePrams et je les ai liées à $ scope après quoi j'ai essayé de passer la même variable à filter-data en vue quelque chose comme @israelidanny suggéré dans https://github.com/esvit /ng-table/pull/342 mais cela ne fonctionne pas non plus pour moi. :(

PS : je fais tableParams.reload(); après avoir ajouté et modifié.

Je n'ai plus mon code car je suis passé de la table ng avant de commettre quoi que ce soit. Cependant, de mémoire :

Les fonctions de filtrage (votre fonction getCompany) ne sont invoquées qu'une seule fois lors de l'initialisation de la table. Vous devez donc appliquer des modifications au tableau de données résolu chaque fois qu'il y a des modifications d'enregistrement et angulaire appliquera ces modifications au dom.

$scope.company_filter = [];

$scope.getCompanyFilter = function(data) {
  var def = $q.defer();
  companyService.getAll().success(function(response) {
    $scope.updateCompanyFilter(response.data);
    def.resolve($scope.company_filter);
  });
  return def;
};

$scope.updateCompanyFilter = function(data) {
  $scope.company_filter.length = 0;
  for (i in data) {
    $scope.company_filter.push({
        'id': data[i].id,
        'title': data[i].name
    });
  }
};

// Then wherever you refresh your table data, just call updateCompanyFilter(data).
// Or you could micro manage the filter array when you do adds/deletes instead of reseeding it every time.

<td ... filter-data="getCompanyFilter($column)" >

Encore une fois, je peux me tromper puisque cela fait quelques mois.

Ce problème est-il résolu dans la dernière version de ng-table ?

Quelqu'un pourrait-il fournir un exemple de code

Je ne pense pas que ce soit le cas.

Maintenant, je ne pense pas qu'il serait trop difficile de faire le
controller.loadFilterData fonction disponible pour être appelée à partir du
tablParams. Vous pourrez alors l'appeler lorsque les listes changent dans
ton application.

C

Le vendredi 19 juin 2015 à 6h59, rachithaShetty [email protected]
a écrit:

Ce problème est-il résolu dans la dernière version de ng-table ?

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/esvit/ng-table/issues/186#issuecomment-113384084 .

:+1: @kyleboyle : ta solution est

Il semble que la résolution de ce problème (Pull request 403 : https://github.com/esvit/ng-table/pull/403) ait été fusionnée dans la v0.4.2, mais la modification qu'elle a apportée a depuis été annulée.

Sur la ligne 549 de ng-table.js change

$scope.$watch('params.$params', function(newParams, oldParams) {
à
$scope.$watch('[params.$params, params.data]', function(newParams, oldParams) {

Cela a résolu le problème avec la mise à jour des données, mais la table ne s'actualisant pas pour rendre les modifications.
Il semble que ce bogue ait été réintroduit dans ce commit : https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

Malheureusement, $watch 'ing params.data provoque des problèmes dans certaines circonstances :

lorsque les éléments dans params.data sont complexes impliquant des références circulaires, $watch 'ing _by value_ provoque une exception de débordement de pile lorsque angular.copy crée un clone profond.

Je pense qu'une version plus récente de angular.copy résout ce problème particulier, mais c'est toujours une mauvaise idée de regarder params.data _by value_ pour des raisons de performances.

@kyleboyle Ce code fonctionne parfaitement ! Merci! Et l'ajout de la fonction inArray peut filtrer les doublons.

    $scope.manufacturer_filter = [];
    $scope.getManufactFilter = function(column){
        var def = $q.defer();
        ResourseAPI.query(function(data){
            $scope.updateManufactFilter(data.devices);
            def.resolve($scope.manufacturer_filter);
        });
        return def;
    };
    $scope.updateManufactFilter= function(data) {
        var arr = [];

        angular.forEach(data, function (item) {
            if (inArray(item.manufacturer, arr) === -1) {
                arr.push(item.manufacturer);
                $scope.manufacturer_filter.push({
                    'id': item.manufacturer,
                    'title': item.manufacturer
                });
            }
        });
    };

    var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val);
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === val) return i;
        }
        return -1;
    };

@kyleboyle Votre solution est excellente.
Est-ce que quelqu'un sait s'il pourrait implémenter quelque chose de similaire mais en utilisant ng-table-dynamic ?
Je charge les colonnes dynamiquement par javascript.

Exemple:

var column = {
    title: 'Example',
    sortable: 'example',
    filter: 'example',
        filterData: .....,
    show: true,
    field: 'example'
};

Que doit définir la propriété filterData ? Ou existe-t-il un autre moyen de recharger les filtres de données ?

Il existe de nombreuses façons de spécifier le tableau que le filtre de sélection utilisera comme source de données. Chacune de ces méthodes s'applique à la fois à ng-table et à ng-table-dynamic .

Peut-être que l'exemple de code suivant peut vous aider à comprendre quelque chose ?

http://codepen.io/christianacca/pen/JdqjxB?editors=101

Bon échantillon, mais je ne trouve pas la solution à mon problème. Dans tous les exemples, les données ne sont chargées qu'une seule fois (sync ou async) mais elles ne sont pas rechargées.

Un exemple de ce que j'obtiens est :
J'ai deux colonnes : Pays et villes, chacune avec un filtre.
Alors:

  • Lorsque le filtre de pays est nul, le serveur a invité toutes les villes.
  • Lorsque le filtre de pays est sélectionné, demandez au serveur la seule ville que ce pays applique et mettez à jour la colonne filterData des villes.

C'est compris? Désolé pour mon anglais.

Merci pour la réponse.

@kyleboyle aucune de ces solutions ne fonctionne pour moi (je ne fais même aucun filtrage) et je

@BartoGabriel Je pense que ce que vous essayez de faire est possible. Un gars avec qui j'ai travaillé a résolu le problème en créant son propre modèle de filtre qui a fait exactement ce que vous avez dit. Il a remplacé le modèle select.html de la même manière que dans l'exemple suivant : http://codepen.io/christianacca/pen/xGeWGX?editors=101

Désolé, je ne peux pas être plus utile, juste pressé par le temps !

Oh BTW, le gars que j'ai mentionné, il a utilisé le ui-select2

@christianacca merci pour votre aide. C'était très utile.
Quand j'aurai la solution je la partagerai.

Cool :-)

Salut les gars, ma solution est-elle totalement fausse ou @kyleboyle est-

@telwing, votre solution n'a pas fonctionné pour moi, mais encore une fois, celle de @kyleboyle non plus . Je ne fais pas de filtrage, cependant. Je trie simplement les données d'un tableau, $scope.users. Lorsque je supprime un élément de ce tableau et appelle reload() sur les paramètres de la table, rien ne se passe. C'est vraiment surprenant que quelque chose comme ça soit si compliqué à moins que je manque quelque chose de basique.

J'ai également les mêmes problèmes que @developersatish.j'ai également essayé de définir le nombre de tableParams mais mon appel de fonction getdata uniquement au chargement de la page tout en filtrant les données par liste déroulante, il n'est pas en mesure d'appeler cette fonction

$scope.tableParams = new ngTableParams({
page : 1, // afficher la première page
compte : 8, // compte par page
tri : {
LastSeen : 'desc' // tri initial
},
filtre : {
NomPatient : '', // filtre initial
},
}, {
filterSwitch : vrai,
getData : fonction ($defer, paramètres) {
// utilise le filtre angulaire intégré
var filteredData = params.filter() ?
$filter('filter')($scope.items, params.filter()) :
$scope.items ;

        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
        params.total(orderedData.length); // set total for recalc pagination
        $scope.tableParams.count(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));



    }
});
Cette page vous a été utile?
0 / 5 - 0 notes