Ng-table: tableParams.reload() lädt Filterdaten nicht neu

Erstellt am 27. Jan. 2014  ·  30Kommentare  ·  Quelle: esvit/ng-table

Ich verwende tableParams.reload() (und params.total(filteredData.length)), wodurch die Tabelle mit den neuen externen Daten neu geladen wird, aber die Auswahl in den Filtern "select" und "select-multiple" ändert sich nicht. tableParams.reload() sollte die "filter-data"-Funktionen erneut aufrufen, nicht wahr? gibt es eine andere Möglichkeit, dies zu erreichen?

Hilfreichster Kommentar

Meine Daten werden erfolgreich auf DOM geladen, aber wenn ich die Daten vom Server hole und die ng-Tabelle durch tableParams.reload() aktualisieren möchte, spiegelt es das Ergebnis nicht wider, aber wenn ich auf Sortieren oder Paging klicke, spiegelt es das Ergebnis wider.
was kann das für ein Problem sein?

Alle 30 Kommentare

Hi. Erstmal - danke für das Projekt.
Ich habe das gleiche Problem. Ich muss Filter mit Daten aktualisieren, die von einem Server abgerufen wurden, habe aber keine Ahnung, wie man die Filterdatenfunktion auslöst.

Ich habe festgestellt, dass die Tabelle zu aktualisieren scheint, wenn Sie Ihre Daten direkt in der getData-Funktion deklarieren.
Also..... getData: function($defer, params){
var data = $scope.yourdata;
var orderdata = .................................
}

Meine Daten werden erfolgreich auf DOM geladen, aber wenn ich die Daten vom Server hole und die ng-Tabelle durch tableParams.reload() aktualisieren möchte, spiegelt es das Ergebnis nicht wider, aber wenn ich auf Sortieren oder Paging klicke, spiegelt es das Ergebnis wider.
was kann das für ein Problem sein?

Ich möchte dem, was @basilcronus vorgeschlagen hat,

Hatte das gleiche Problem mit @developersatish.
Warten Sie auf eine Lösung für dieses Problem.

Hallo allerseits. Ich habe vor kurzem angefangen, ngTable zu verwenden. Ich habe ein ähnliches Problem, insbesondere mit verschachtelten ngTables und dem erneuten Laden von Daten, die von den übergeordneten Daten getrennt sind. hier ist eine schnelle idee:

übergeordneter Controller:

var parentData = [...];

$scope.details = -1

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

// ngTabelle ////////
$scope.tableParams = new ngTableParams({
Seite: 1, // Erste Seite anzeigen
Anzahl: 10, // Anzahl pro Seite
Sortierung: {
id: 'asc' // anfängliche Sortierung
}
}, {
total: parentData.length, // Länge der Daten
getData: function($defer, params) {
// eingebauten Winkelfilter verwenden
var orderdata = params.sorting() ?
$filter('orderBy')(parentData, params.orderBy()) :
Elterndaten;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

auf dem html habe ich einen ng-klick, um die id an diese zu senden und den detailumfang zu ändern.

Untergeordneter Controller (Sekundärtabelle, die sich auf den ersten Controller bezieht):

var childData = [...];

$scope.$parent.$watch('details', function() {
console.log("du hast es hierher geschafft");
$scope.tableParams2.reload();
});

// untergeordnete ngTable ////////
$scope.tableParams2 = new ngTableParams({
Seite: 1, // Erste Seite anzeigen
Anzahl: 10, // Anzahl pro Seite
Sortierung: {
id: 'asc' // anfängliche Sortierung
}
}, {
total: childData.length, // Länge der Daten
getData: function($defer, params) {
// eingebauten Winkelfilter verwenden
var orderdata = params.sorting() ?
$filter('orderBy')(childData, params.orderBy()) :
kindDaten;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $data: {} }
});

Ich kann die Änderung sehen, wenn ich klicke, aber meine untergeordnete Tabelle wird nicht aktualisiert. Ich bin mir nicht sicher, ob das hilft, aber ich denke, es hängt zusammen.

Hallo,
Ich habe auch die gleichen Probleme wie @developersatish. Die Tabellendaten werden erst aktualisiert, nachdem ich die Tabelle sortiert oder gefiltert habe. Gibt es eine Lösung für dieses Problem?

Ich habe ein ähnliches Problem.

Bei einem Klickereignis starte ich das Abrufen von Daten von einem Server (mehrere Aufrufe).
Also habe ich eine for-Schleife und darin habe ich GET-Anfragen und ich speichere die Ergebnisse, die in eine Bereichsvariable zurückgegeben werden, die ich in einer asynchronen Tabelle darstellen möchte.

Beim Klicken instanziiere ich meine Tabelle jedoch so:

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

wie im ngTable-Beispiel mit ajax. In der Tabelle wird jedoch nichts angezeigt (getData wird nie aufgerufen.)

Wenn ich auf "Refresh" tableParams klicke, beginnt die Tabelle, alles zu laden, außer dass jedes Element dupliziert wird.

Irgendeine Idee?

@developersatish Ich konnte neue Daten vom Server widerspiegeln,

$scope.tableParams.count(1);

Ich habe dies im Rückruf meiner Anfrage angegeben.

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

Bearbeiten:

In meinem ursprünglichen Beitrag sollte das 1 in $scope.tableParams.count(1) eigentlich durch eine Variable ersetzt werden, die den auf count gesetzten Wert in ngTableParams .
Ein funktionierendes Beispiel finden Sie unter http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview .

Da dies das Top-Suchergebnis für dieses Problem ist, füge ich hinzu, was ich für meine Lösung getan habe. Ich habe einfach in meinem $scope das Array von {id,title}-Objekten gespeichert, das als Argument für defer.resolve in der filter-data-Funktion verwendet wird. (es könnte / ist anfangs wahrscheinlich leer.) Sie können dieses Array dann jederzeit aktualisieren und die Änderungen werden in der Filterauswahl widergespiegelt. Also aktualisiere ich es, wenn mein Ajax-Aufruf die Serverantwort zurückbringt.

Auch in meinem Fall wird der Tabellendatensatz erweitert (wird erweitert), wenn der Benutzer den Suchbereich erweitert. Dies erfordert, dass ich auch die Auswahlfilter ändere (ein Diff anwende).

Das habe ich versucht aber es geht nicht. Können Sie Ihr Arbeitsbeispiel einfügen?

Hallo Leute,
Ich habe das gleiche Problem wie @almaplayera , ich habe ein Szenario wie etwa

1. Die im Dropdown verwendeten Filterdaten stammen vom Dienst

2. Und um die gleichen Daten zu aktualisieren, habe ich einen Abschnitt, in dem der Benutzer neue Einträge hinzufügen / bestehende aktualisieren kann.

3. Nach dem Hinzufügen/Aktualisieren der Einträge aus dem Abschnitt filterdata für Dropdown hinzufügen/bearbeiten sollte diese Dropdown-Liste aktualisiert werden, sobald die Tabelle neu geladen wird.

Ich tue dies, um meine Firmendaten zu filtern-daten -

screen4ngtable

Danach habe ich die getCompany-Methode in den Filterdaten meiner Ansicht aufgerufen -

screen5ngtable

Kann jemand bitte Lösungen vorschlagen, um meine Filterdaten mit den neuesten Daten vom Dienst zu aktualisieren, oder einige Beispiele für ähnliche Anwendungsfälle bereitstellen.

@esvit: Ich habe versucht, meine Daten bei getData Rückruf in ngTablePrams zu bekommen und binded auf $ Umfang nach , dass ich versuchte , die gleiche Variable vorbei zu filter Daten im Hinblick auf so etwas wie @israelidanny vorgeschlagen in https://github.com/esvit /ng-table/pull/342 aber das funktioniert bei mir auch nicht. :(

PS: ich mache tableParams.reload(); nach dem Hinzufügen und Bearbeiten.

Ich habe meinen Code nicht mehr, da ich von ng table weggegangen bin, bevor ich etwas festgeschrieben habe. Allerdings aus dem Gedächtnis:

Die Filterfunktionen (Ihre Funktion getCompany) werden nur einmal bei der Tabelleninit aufgerufen. Sie müssen also immer dann Änderungen auf das aufgelöste Datenarray anwenden, wenn es Datensatzänderungen gibt, und angle wendet diese Änderungen auf den Dom an.

$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)" >

Auch hier könnte ich mich irren, da es ein paar Monate her ist.

Ist dieses Problem in der neuesten Version von ng-table behoben?

Könnte jemand einen Beispielcode bereitstellen

Ich glaube nicht, dass es so ist.

Nun, ich denke, es wäre nicht allzu schwierig, dies zu machen
controller.loadFilterData-Funktion verfügbar, um von der aufgerufen zu werden
tablParams. Diese könnten Sie dann aufrufen, wenn sich die Listen ändern
Ihre Bewerbung.

C

Am Freitag, den 19. Juni 2015 um 6:59 Uhr, rachithaShetty [email protected]
schrieb:

Ist dieses Problem in der neuesten Version von ng-table behoben?


Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084.

:+1: @kyleboyle : deine Lösung rockt Kumpel, bei mir hat es funktioniert..! Großartigkeit...! Vielen Dank.

Es scheint, dass die Lösung für dieses Problem (Pull-Request 403: https://github.com/esvit/ng-table/pull/403) in v0.4.2 zusammengeführt wurde, aber die vorgenommene Änderung wurde seitdem zurückgesetzt.

In Zeile 549 der ng-table.js-Änderung

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

Dadurch wurde das Problem behoben, bei dem die Daten aktualisiert wurden, die Tabelle jedoch nicht aktualisiert wurde, um die Änderungen zu rendern.
Es scheint, dass dieser Fehler in diesem Commit wieder eingeführt wurde: https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

Leider verursacht $watch 'ing params.data bestimmten Umständen Probleme:

Wenn die Elemente in params.data komplex sind und Zirkelverweise beinhalten, verursacht $watch 'ing _by value_ eine Stapelüberlauf-Ausnahme, wenn angular.copy einen Deep Clone erstellt.

Ich glaube, dass eine neuere Version von angular.copy dieses spezielle Problem behebt, aber es ist immer noch eine schlechte Idee, params.data _nach Wert_ aus Leistungsgründen zu sehen.

@kyleboyle Dieser Code funktioniert perfekt! Danke! Und das Hinzufügen der inArray-Funktion kann die Duplikate herausfiltern.

    $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 Deine Lösung ist großartig.
Weiß jemand, ob er etwas Ähnliches implementieren könnte, aber mit ng-table-dynamic?
Ich lade Spalten dynamisch per Javascript.

Beispiel:

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

Was sollte die Eigenschaft filterData setzen? Oder gibt es eine andere Möglichkeit, Datenfilter neu zu laden?

Es gibt viele verschiedene Möglichkeiten, das Array anzugeben, das der Auswahlfilter als Datenquelle verwendet. Jede dieser Methoden gilt sowohl für ng-table als auch für ng-table-dynamic .

Vielleicht kann Ihnen das folgende Codebeispiel helfen, etwas herauszufinden?

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

Gutes Beispiel, aber ich kann die Lösung für mein Problem nicht finden. In allen Beispielen werden die Daten nur einmal geladen (sync oder async), aber nicht neu geladen.

Ein Beispiel was ich bekomme ist:
Ich habe zwei Spalten: Länder und Städte, jede mit einem Filter.
So:

  • Wenn der Länderfilter null ist, fordert der Server alle Städte auf.
  • Wenn der Länderfilter ausgewählt ist, fragen Sie den Server nach der einzigen Stadt, die dieses Land anwendet, und aktualisieren Sie die Spalte filterData of Cities.

Es wird verstanden? Entschuldigung für mein Englisch.

Danke für die Antwort.

@kyleboyle keine dieser Lösungen funktioniert für mich (ich

@BartoGabriel Ich denke, was Sie versuchen, ist möglich. Ein Typ, mit dem ich zusammengearbeitet habe, hat das Problem gelöst, indem er seine eigene Filtervorlage erstellt hat, die genau das tat, was Sie gesagt haben. Er überschrieb die Vorlage select.html in ähnlicher Weise wie im folgenden Beispiel: http://codepen.io/christianacca/pen/xGeWGX?editors=101

Tut mir leid, dass ich nicht hilfreicher sein kann, nur unter Zeitdruck!

Ach übrigens, der Typ, den ich erwähnt habe, hat die ui-select2 benutzt

@christianacca danke für deine Hilfe. Es war sehr nützlich.
Wenn ich die Lösung habe, werde ich sie teilen.

Cool :-)

Hallo Leute, ist meine Lösung total falsch oder ist @kyleboyle nur eine bessere Alternative?

@telwing Ihre Lösung für mich nicht funktioniert hat, aber dann wieder, weder @kyleboyle s‘tat. Ich mache jedoch keine Filterung. Ich sortiere nur Daten aus einem Array, $scope.users. Wenn ich ein Element aus diesem Array entferne und reload() für die Tabellenparameter aufrufe, passiert nichts. Es ist wirklich überraschend, dass so etwas so kompliziert ist, es sei denn, mir fehlt etwas Grundlegendes.

Ich habe auch die gleichen Probleme wie @developersatish.i habe auch versucht, tableParams count einzustellen, aber mein getdata-Funktionsaufruf nur beim Laden der Seite beim Filtern von Daten nach Dropdown-Liste kann diese Funktion nicht aufrufen

$scope.tableParams = new ngTableParams({
Seite: 1, // Erste Seite anzeigen
Anzahl: 8, // Anzahl pro Seite
Sortierung: {
LastSeen: 'desc' // anfängliche Sortierung
},
filtern: {
PatientName: '', // Anfangsfilter
},
}, {
FilterSchalter: wahr,
getData: function ($defer, params) {
// eingebauten Winkelfilter verwenden
var gefiltertData = 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()));



    }
});
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

zam6ak picture zam6ak  ·  20Kommentare

muhlegg picture muhlegg  ·  29Kommentare

richtmat picture richtmat  ·  7Kommentare

Ebolon picture Ebolon  ·  12Kommentare

yujiayinshi picture yujiayinshi  ·  8Kommentare