Ng-table: Beispiel mit serverseitigem Sortieren, Filtern, Gruppieren und Paginieren...

+1

+1

Hallo, ng-table dies ist nur eine Clientbibliothek, Serverteil können Sie nach Belieben erstellen. Zum Beispiel können Sie diesen Teil des Codes https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87 . anschauen

@esvit - Die Anfrage war für ein vollständiges Beispiel für die serverseitige Paginierung, Sortierung, Gruppierung, Filterung usw. von ng-table. Ich stimme zu, dass ng-table eine Client-Bibliothek ist, aber ein solches Beispiel würde wirklich viel helfen der Szenarien beinhalten die Verwendung dieser Clientbibliothek mit Remotedaten...

@esvit ja alles was wir möchten ist etwas, das zeigt, wie man es tun _sollte_, dh welches JSON-Objekt ng-table erwartet?

+1
Auch wenn uns nur eine Möglichkeit helfen würde, die Klickereignisse des Filterns, Sortierens und Pagings abzufangen, den Rest an den Server anzuschließen... danke

tolle Bibliothek übrigens ...

+1

+1

+1

+1, wenn es eine nette Möglichkeit gibt, eine benutzerdefinierte Funktion zum Sortieren aufzurufen, die jedoch nicht benötigt wird.

Geben Sie entweder ein ng-click="sort(vars,directionToggle)" in die Kopfzeile ein und Sie können die Sortierung sogar aktiviert lassen. Die Pfeile werden dann richtig angezeigt, solange Ihr Richtungsumschalter mit dem Umschalten übereinstimmt.
Die Filterung ist etwas komplizierter, ich würde sagen, die ng-Tabellen-Filterung zu deaktivieren und dem Header eine vollständig benutzerdefinierte Filtereingabe hinzuzufügen, dann müssen Sie sich keine Gedanken über die ng-Tabellen-Intergeneration machen.

Von da an geht es darum, mit Ihren Backend-Daten umzugehen und sicherzustellen, dass Ihnen die richtigen Daten in der richtigen Reihenfolge gesendet werden. Dann stecken Sie einfach diese Daten ein und bam, Sie haben eine Ajax-Sortier-/Filtertabelle.

+1

Falls dies für den Anfang hilfreich ist, hier ein Beispiel für die serverseitige Paginierung. Der Client sendet die Seitennummer und Seitengröße an den Server, und der Server gibt die Datenzeilen nur für diese Seite und die Gesamtzahl der Zeilen als Antwortheader zurück.

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

Hoffe das ist für jemanden hilfreich.
Foxdonut

+1

+1

+1

wirklich gut

Ich weiß, es ist ein bisschen spät, aber jemand hat ein wirklich gutes Beispiel für die Anzeige serverseitig sortierter Daten gemacht:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

Ich wusste nicht, dass wir das schaffen. Dies ist in der Dokumentation nicht so klar. :(

Hallo Foxdonut,
Dein Kommentar hilft wirklich voll weiter, aber da ich neu bin sind mir einige Dinge nicht klar
1# Warum ReceiveData als Argument an eine Funktion übergeben wird.
Wenn ich meine Ajax-Funktion aufrufe, anstatt
MyResource.query(queryParams, receiveData);
Es zeigt Daten an, aber da Ajax später zurückkehrt, wird die Zählung nicht aktualisiert. Und wenn ich reload im Ajax-Code verwende, geht es in eine Endlosschleife:(

Hallo @rbhargava25

Warum ReceiveData als Argument an eine Funktion übergeben wird.

Weil MyResource.query eine asynchrone Funktion ist. Es stellt eine Anfrage an den Server, und wenn die Antwort zurückkommt, müssen wir wissen, welcher Code ausgeführt werden soll. In diesem Fall muss die _Callback-Funktion_ aufgerufen werden, die receiveData .

Hoffentlich hilft das.

Super danke Foxdonut...
Ich werde eine einfache http-Anfrage anstelle von Ressource verwenden. Ich hoffe, dass es funktioniert.