Aktualisieren einer Tabelle

  • Moin,


    ich habe eine Tabelle und habe für die das DataTable Plugin genutzt. Funktioniert auch soweit ganz gut.

    Um diese Tabelle herum habe ich einen <div> erstellt, dieser heißt "refreshData".

    Innerhalb dieser Tabelle habe ich einen Löschen Button. Sobald ich den Löschen Button drücke, für eine Datei, wird die Datei zwar gelöscht und die Tabelle wird indirekt neu geladen. Es verschwindet zwar die Datei aber der Counter (Wie viele Dateien vorhanden sind) wird noch so angezeigt, als wenn die Datei noch da ist.

    Z.B haben wir 3 Dateien, die in der Tabelle angezeigt werden

    Der Counter sagt dann auch "3 von 3 Dateien"

    Lösche ich nun eine Datei zeigt die Tabelle nur noch 2 Dateien an, aber der Counter zeigt weiterhin "3 von 3 Dateien". Erst nach einem richtigen Aktualisieren ändert sich dies.


    Mein zweiter Fehler:

    Ich durchsuche ja ein Verzeichnis und gebe den Inhalt aus. Wenn nichts in dem Verzeichnis ist, gebe ich die Meldung aus "Es ist nichts vorhanden".

    Wenn ich jetzt zum Beispiel nur noch eine Datei habe und diese Lösche, wird diese Meldung nicht mehr ausgegeben.

    Hier einmal die Tabelle:



    Hier einmal das Lösch Script:


    Und einmal die DataTable:

    Code
    1. <script>
    2. $(document).ready(function() {
    3. $('#verzeichnis').DataTable( {
    4. "ordering": false,
    5. "language": {
    6. "url": "includes/German.json"
    7. }
    8. } );
    9. });
    10. </script>


    Hat jemand eventuell eine Idee woran das liegen kann?



    LG

  • Was das Problem mit Datatables betrifft, so vermute ich, dass Du mit dem jQuery-load die Tabelle komplett überschreibst. Dabei bleibt aber alles, was Datatables hinzu gefügt hat und was außerhalb der Tabelle liegt, erhalten.

    Informiere dich über die Funktion destroy:

    https://datatables.net/reference/api/destroy()

    zerstöre damit die Tabelle vor dem Aktualisieren, dann lade sie mit deinem jQuery-load neu und initialisiere sie wieder.


    Eleganter wäre es, die Tabelle mit dem eingebauten Ajax von Datatables zu laden, denn dann könntest Du sie einfach mit reload neu laden, siehe hier:

    https://datatables.net/reference/api/ajax.reload()

    Aber dazu wären wahrscheinlich einige Anpassungen auch am PHP-Skript nötig, weil es dann JSON statt HTML liefern muss.

  • Habe das mal mit dem destroy versucht. Wenn ich nur noch eine Datei habe und diese Lösche, kommt meine Meldung "Nichts Vorhanden" wieder.

    Allerdings wenn ich mehrere Dateien habe und eine davon Lösche, entfernt er die komplette DataTable.


    im Success Teil habe ich nun dies so hinzugefügt.


    Code
    1. success: function(data) {
    2.     if(data) {
    3.         table.destroy();
    4.          $('#verzeichnis').DataTable();
    5.         $("#refreshData").load("verzeichnis.php?folder=" + folder2 + " #refreshData");
    6.     }
    7. }


    Die DataTable habe ich nun auch nur noch so eingebunden:


    Code
    1. <script>
    2. var table = $('#verzeichnis').DataTable();
    3. </script>
  • Genau verkehrt herum, Du musst die Tabelle erst laden und dann initialisieren. Und dabei berücksichtigen, dass das Laden einen kurzen Moment dauert, daher die Initialisierung im Callback des load:

    Code
    1. success: function(data) {
    2. if(data) {
    3. table.destroy();
    4. $("#refreshData").load("verzeichnis.php?folder=" + folder2 + " #refreshData",
    5. function(){
    6. table = $('#verzeichnis').DataTable();
    7. });
    8. }
    9. }