Aurelia: Daten verschwinden in der Tabelle bei der Verwendung von DataTables jquery plugin

Question

Ich benutze das Plugin jQuery Datentabellen (https://datatables.net/).

Sie können es auf einer HTML-Tabelle wie folgt verwenden:

$("#table").DataTable(); 

Wenn ich eine normale HTML-Tabelle in meiner Ansicht haben und die oben in der attached() Methode meiner Ansicht Modell fein funktioniert alles nennen.

Aber Dinge gehen schief, wenn ich dies beim Generieren der Tabelle aus Daten versuchen, die ich von meiner API bekomme.

Die Tabelle wird generiert, aber darunter, statt etwas wie "zeige 0 bis 10 von 93 Einträgen" sagt es "zeigt 0 bis 0 von 0 Einträgen". Wenn ich versuche, die Tabelle nach einer bestimmten Spalte zu sortieren, verschwinden alle Daten und es bleiben nur die Spaltenüberschriften übrig.

UPDATE: Ich verwende keine Ajax-Aufrufe zum Sortieren der Tabelle. Ich erstelle meine Tabelle aus den Daten, die ich von meinem Server erhalte. Zur Erläuterung: Ich bekomme ein JSON-Objekt vom Server. Verwenden Sie das json-Objekt, um die Tabelle mit "repeat.for = 'row of tableData'" zu erstellen. Der Aufruf der .DataTable() in angehängten Hook erstellt das Problem. Ich habe versucht, eine einfache Schaltfläche zu erstellen, die die .DataTable() -Methode aufruft, wenn Sie darauf klicken. Es erstellt die Tabelle ordnungsgemäß. Scheint wie ein Problem mit dem Aufruf in den beigefügten() Haken

Answer 1

Sie werden eine custom element für Ihr DataTable-Objekt erstellen möchten. Wahrscheinlich werden Sie ein custom binding auf Ihrem DataTable-Element verwenden, wo Sie die Daten übergeben. Zu guter Letzt möchten Sie eine Art Refresh- oder Teardown/Buildup-Funktion auf Ihrem DataTable-Plugin im "valueChanged" -Rückruf der rows-Bindung aufrufen.

dataTable.js

@inject(Element) 
export class DataTableCustomElement { 

    element; 
    @bindable rows; 

    constructor(Element) { 
     this.element = $(Element); 
    } 

    rowsChanged(newValue, oldValue) { 
     this.element.DataTable.refresh(); // or whatever it is 
    } 
} 

view.html

<data-table rows.bind="data.rows"></data-table> 

ich etwas über Ihre Datatable-API weiß nicht. Es wurde möglicherweise nicht entwickelt, um mit neuen Daten umzugehen, die vom Server kommen. Ich überlasse das dem Leser.

Answer 2

Ich stimme MJ zu, aber Sie können mit Zeitproblemen verfallen.

Aurelia verwendet ein Asynchron-Bindungssystem, das DOM Aktualisierungen der Mikro Task-Warteschlange, um Batch-Warteschlangen sie aus Performance-Gründen (das ist, warum es so schnell ist)

Sie könnten die folgende versuchen, die jede Wiederholung in der Theorie erlauben sollte Bindungen, die vor der Initialisierung Ihrer Datentabellen verarbeitet werden sollen.

import {TaskQueue} from 'aurelia-framework'; 

@inject(Element, TaskQueue) 
export class DataTables { 
    constructor(element, taskQueue) { 
    this.element = element; 
    this.taskQueue = taskQueue; 
    } 

    attached() { 
    this.taskQueue.queueMicroTask(() => { 
     // Init data tables here 
    }); 
    } 
}