Ich versuche, eine Tabelle zu erstellen, in der Benutzer auswählen können, welche Spalten ein-/ausgeblendet werden sollen. JQuery (das ich bereits auf meiner Site verwende) bietet dies über ihr JQuery Mobile "responsive table" -Widget, speziell die "column toggle" -Variante.JQuery Mobile reaktive Tabelle funktioniert nicht für dynamisch erstellte Tabelle, auch nach der Aktualisierung

Ich kann dies perfekt funktionieren, wenn ich die Tabelle in die Seite legen, damit ich weiß, dass die Dateien importiert werden und mein Code korrekt ist. Das Problem ist, dass diese Tabelle das Ergebnis eines Ajax-Aufrufs ist, also innerhalb der $ .post() -Funktion erstellt und auf der einmal erstellten Seite platziert wird. Auch dieser Teil funktioniert gut für die Anzeige des Tisches. Wenn die Tabelle jedoch anzeigt, reagiert sie nicht. Zumindest fehlen die wichtigen "Spalten ..." -Links. In $ .post(), ich die Tabelle wie folgt konstruieren, fügen Sie dann hinzu: resultsTable = $("<table id='resultsTable' data-role='table' data-mode='columntoggle' data-column-btn-text='Show/Hide Columns...' class='ui-responsive'></table>");

ich das Problem denke, dass jQuery Mobile nicht in die Tabellenerstellung Haken kann es zu ändern, oder für einige anderer Grund weiß nicht, dass es existiert. Ich versuchte daher, es kurz vor dem Ende von $ .post zu aktualisieren:

Dies hat keine Auswirkungen. Ich habe versucht, sie herumzubewegen, die "Refresh" -Methode auf verschiedene Arten aufzurufen und nachzusehen, ob andere dieses Problem hatten. Bisher keine Ergebnisse. Ich weiß, dass die Lösung einfach sein muss, aber ich kann sie nicht finden. Ich kann viel über das dynamische Generieren von Tabellen und eine Menge über reaktionsfähige Tabellen herausfinden, aber nichts über die Verwendung von ihnen zusammen. Ich würde mich über Vorschläge freuen. Danke im Voraus.

Quelle

2016-04-26 AH16

Es wäre am besten, Beispielcode hinzuzufügen, was Sie bisher versucht haben. Auch unsicher, warum Sie dies für 'jquery-ui' markiert haben. – Twisty

haben Sie versucht 'resultsTable ="

";' –

Cesar, ich verwendete ursprünglich Strings, ja, aber das machte keinen Unterschied. Auf diese Weise kann ich die Teile der Tabelle anhängen und den Code viel übersichtlicher und leichter zu pflegen. Außerdem dachte ich, dass die Umstellung auf den $ ("") Weg JQuery etwas einbringen könnte. @Twisty, welchen Code möchtest du? Alles andere baut nur den Tisch, der direkt auf dem Bildschirm aussieht. Vielen Dank. – AH16

Nachdem die Tabelle in dem Behälter DOM-Element anhängen, rufen enhanceWithin() auf dem Behälter:

$("#tableCont").empty().append(resultsTable).enhanceWithin();

DEMO

Klicken Sie auf die Schaltfläche in der Demo eine Tabelle zu erstellen.

Quelle

2016-04-26 21:57:48 ezanker

Ah ha, das war's! Ich musste den Aufruf von resultsTable.table() entfernen, bevor es funktionierte, aber sobald ich das tat, erschien mein Link und meine Spalten konnten ausgeblendet werden. Danke für die Hilfe! – AH16

Ich würde empfehlen, die .table() vor dem Anhängen an den HTML zuweisen.

In Ihrem $.post() Erfolgsfunktion, kann es wie folgt aussehen:

var resultsTable = $("<table>", { 
    'id':'resultsTable', 
    'data-role':'table', 
    'data-mode':'columntoggle', 
    'data-column-btn-text':'Show/Hide Columns...', 
    'class':'ui-responsive' 
}); 
resultsTable.table(); 
resultsTable.appendTo("#results");

Auf diese Weise wird das Element vor der Zugabe zu reagieren eingestellt.

Auch refresh ist keine Methode oder ein Ereignis von .table(): https://api.jquerymobile.com/table/

Ich glaube, Sie .table('rebuild') stattdessen versuchen können.

Quelle

2016-04-26 21:06:22 Twisty

JQuery Mobile reaktive Tabelle funktioniert nicht für dynamisch erstellte Tabelle, auch nach der Aktualisierung

Antwort

DEMO

Verwandte Themen