Ankündigung

Einklappen
Keine Ankündigung bisher.

MySQL Tabelle automatisch im Intervall aktualisieren / refresh

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • MySQL Tabelle automatisch im Intervall aktualisieren / refresh

    Hallo Forum,

    ich habe eine neue kleine Herausforderung, wo ich schon mehrere Tage mir meine Zähne daran ausgebissen habe.

    Eine Lösung habe ich gefunden, die meine Tabelle aktualisiert, aber dabei die Bibliothek (dataTables) "vergisst, d.h. er aktualisiert die Inhalte, nimmt aber nicht das "drumherum" mit.

    z.B. das verschwindet:

    Unbenannt.PNG

    Mein bisheriger Code:



    HTML-Code:
    <head>
    
        <link rel="stylesheet" href="../assets/jquery.dataTables.min.css">
        <script src="../assets/jquery.dataTables.min.js"></script>
    
    
    </head>
    
    
    <body>
    
    <div id="here">
    
                <table class="container" id="example" class="display">
                    <thead>
                        <tr>
                            <!-- <th>
                                <h1>ID</h1>
                            </th> -->
                            <th>
                                <h1>ANGELEGT AM</h1>
                            </th>
                            <th>
                                <h1>RECHNUNG-NR.</h1> <!-- Rechnungsnummer -->
                            </th>
                            <th>
                                <h1>KUNDE</h1> <!-- Rechnungsnummer -->
                            </th>
                            <th>
                                <h1>VORNAME</h1>
                            </th>
                            <th>
                                <h1>NAME</h1>
    .
    .
    .
    .
    .
    usw.
                </tr>
                    </thead>
    
    <tbody>
    [PHP]                    <?php
                            include('conn.php');
                            // $query=mysqli_query($conn,"select * from 'meinetabelle'");
    
                            $sql = 'select * from meinetabelle';
                            $query = mysqli_query($conn, $sql) or die("Anfrage fehlgeschlagen: " . mysql_error());
    
                            while($row=mysqli_fetch_array($query)){
                                ?>
                        <tr>
                            <!-- <td><?php echo $row['id']; ?></td> -->
    
                            <td><?php echo $row['datum']; ?></td>
                            <td><?php echo $row['rechnungsnummer']; ?></td>
                            <td><?php echo $row['kunde']; ?></td>
                            <td><?php echo $row['vorname']; ?></td>
                            <td><?php echo $row['name']; ?></td>[/PHP]
    .
    .
    .
    usw.
                         </td>
                        </tr>
    
                    </tbody>
    </div>
    
    
    
        <script>
    
        $(document).ready(function() {
            setInterval(function() {
                $("#here").load(window.location.href + " #here");
            }, 3000);
        });
    
        </script>
    
    
    
    </body>


  • #2
    Mach das doch mit Ajax reload:

    https://datatables.net/reference/api/ajax.reload()
    sorry, shift-taste kaputt

    Kommentar


    • #3
      Meister1900 Ich glaub der Link geht nicht (hiermit gehts: https://datatables.net/reference/api/ajax.reload) Aber die Idee ist die richtige. Hier mal noch ein paar Tipps von mir:
      • Wenn es noch etwas verbessern willst, lade nur die Daten, die sich seit dem letzten mal geändert haben (z.B. mit einem Datums-Parameter ajax.php?newerThan=2021-05-23T17%3A59%3A38.576Z => SELECT * FROM meinetabelle WHERE datum > ?)
      • Nutze beim SELECT nicht *, sondern die Namen der Spalten
      • Verwende "prepared statements" (https://www.php.net/manual/de/mysqli...statements.php)

      Tutorials zum Thema Technik:
      https://pilabor.com
      https://www.fynder.de

      Kommentar


      • #4
        Zitat von Andreas Beitrag anzeigen
        Meister1900 Ich glaub der Link geht nicht (hiermit gehts: https://datatables.net/reference/api/ajax.reload)
        dein link geht auch nicht. bestimmt ein bug in der forensoftware

        den php code hatte ich mir gar nicht angeschaut. aber ein weiterer punkt wäre, dass das EVA prinzip nicht beachtet wird
        sorry, shift-taste kaputt

        Kommentar


        • #5
          dein link geht auch nicht. bestimmt ein bug in der forensoftware
          *lol* Du hast recht. Nice find.
          Tutorials zum Thema Technik:
          https://pilabor.com
          https://www.fynder.de

          Kommentar


          • #6
            Zitat von Andreas Beitrag anzeigen
            Meister1900 Ich glaub der Link geht nicht (hiermit gehts: https://datatables.net/reference/api/ajax.reload) Aber die Idee ist die richtige. Hier mal noch ein paar Tipps von mir:
            • Wenn es noch etwas verbessern willst, lade nur die Daten, die sich seit dem letzten mal geändert haben (z.B. mit einem Datums-Parameter ajax.php?newerThan=2021-05-23T17%3A59%3A38.576Z => SELECT * FROM meinetabelle WHERE datum > ?)
            • Nutze beim SELECT nicht *, sondern die Namen der Spalten
            • Verwende "prepared statements" (https://www.php.net/manual/de/mysqli...statements.php)
            Vorab vielen Dank für Eure Hilfe.

            Nachdem ich diesen Thread (sagt man das heute noch so?!? ) geöffnet habe, bin ich auch diese Funktion von datatables gestoßen. Ich habe es dann auch versucht in meinen Code zu adaptieren, aber leider bisher ohne Erfolg. Die Erklärung auf der Seite https://datatables.net/reference/api/ajax.reload ist für mich nicht ganz nachvollziehbar. Vermutlich liegt das an meinen kaum vorhanden Vorkenntnissen mit der AJAX-Technik.

            Einer war so nett und hat es hier mal übersichtlich dargestellt: http://live.datatables.net/tefudoji/93/edit . Was ich bei diesem Code und den anderen Beispielen nicht verstehe, ist folgender Teil:

            JavaScript:

            Code:
            $(document).ready(function() {
                var table = $('#example').DataTable( {
                    "ajax": "/ajax/objects.txt",
                    "columns": [
                        { "data": "name" },
                        { "data": "position" },
                        { "data": "office" },
                        { "data": "extn" },
                        { "data": "start_date" },
                        { "data": "salary" }
                    ]
                } );
            
            
              setInterval( function () {
                console.log('reloading table')
                table.ajax.reload( null, false ); // user paging is not reset on reload
              }, 10000 );
            
            
            } );
            Wenn ich das richtig verstehe wird an dieser Stelle "ajax": "/ajax/objects.txt" (vermutlich auch wahlweise .json) die Daten aus der DB zwischengespeichert. Nur wie bekommt ich die Daten dort automatisch rein? Das geht aus der Anleitung nicht so richtig hervor.


            So hatte ich es versucht (bekomme eine Fehlermeldung):

            Code:
                <link rel="stylesheet" href="../assets/jquery.dataTables.min.css">
                <script src="../assets/jquery.dataTables.min.js"></script>
            
                <script>
                $(document).ready(function() {
                    $('#example').DataTable({
                        "pagingType": "full_numbers",
                        "language": {
                            "url": "../assets/German.json"
                        }
                    });
                });
                </script>
            
                <script>
                $(document).ready(function() {
                    var table = $('#example').DataTable({
                        "ajax": "objects.txt",
                        "columns": [{
                                "data": "datum"
                            },
                            {
                                "data": "rechnungsnummer"
                            },
                            {
                                "data": "kunde"
                            },
                            {
                                "data": "ansprechpartner_vorname"
                            },
                            {
                                "data": "ansprechpartner_name"
                            },
                            {
                                "data": "email"
                            }
                        ]
                    });
            
                    setInterval(function() {
                        console.log('reloading table')
                        table.ajax.reload(null, false); // user paging is not reset on reload
                    }, 10000);
            
                });
                </script>

            Kommentar


            • #7
              Was du hier machst, sind AJAX Grundlagen. Schwierig ist, dass du dich gleich an ein so aus meiner Sicht "hochkonfigurierbares Plugin" wie Datatables mit ganz viel Hintergrundmagie heranwagst, anstatt erstmal zu versuchen, es ohne Plugins selbst zu lösen und das Prinzip zu verstehen. Wichtig ist, dass du das Problem nicht als ganzes siehst, sondern in Teilprobleme aufteilst. Ich formuliere dir das ganze mal als "Aufgabenstellung", vielleicht hilft das:
              • Erstelle eine Datei "ajax.php", die dir mit dieses Ergebnis als festen String zurück liefert
                HTML-Code:
                	{
                
                	 "data": [
                	   [
                	     "2011/04/25",
                	     "RE-08154711",
                	     "Testkunde",
                	     "Edinburgh",
                	     "Max",
                	     "Mustermann",
                	     "m.mustermann@domain.de",
                	   ]
                	 ]
                	}
              • Erstelle / erweitere die index.php so mit HTML und JavaScript, dass du entweder mit fetch, klassischem xhr oder $.get die ajax.php aufrufst und das Ergebnis unverändert in einem "<div>" mit der ID "ajax-results" anzeigst
              • Nutze den Netzwerk-Tab der Entwicklertools (F12), um dir anzuschauen, was da im Hintergrund passiert
              • Nun solltest du mit diesem Beispiel in der Lage sein, Datatables so zu erweitern, dass es mit dem festen Eintrag funktioniert (achte auf die JavaScript, HTML und anderen Tabs)
              • Erweitere nun die ajax.php so, dass es mit MySQL funktioniert
              • Optional:
                • Erweitere die Datei "ajax.php" so, dass du beim Aufruf von "ajax.php?newerThan=2021-05-23T17%3A59%3A38.576Z" nur die Ergebnisse bekommst, die neuer sind als der angegebene Zeitpunkt
                • Nutze anstatt jQuery und jQuery.DataTables Simple-DataTables (https://github.com/fiduswriter/Simple-DataTables) und werde jQuery los... das brauchst du hier wirklich nicht mehr.

              Tutorials zum Thema Technik:
              https://pilabor.com
              https://www.fynder.de

              Kommentar


              • #8
                Hallo Andreas,

                vermutlich habe ich das Thema etwas unterschätzt. Die Einbindung der Datatables-Bibliothek war sehr einfach. Ich dachte mir, dass ich "mal eben schnell" das Ganze erweitere um einen Refresh. Geht leider doch nicht so schnell, wie erwartet...

                Manchmal muss man zwei Schritte zurück, um einen Schritt voranzukommen. Da mich die Thematik interessiert und ich es lernen möchte, werde ich mich jetzt erstmal mit den Grundlagen intensiver beschäftigen. Meine Erkenntnisse werde ich anschließend hier im Forum mit Euch teilen. Danke erstmal.

                Kommentar


                • #9
                  Hallo Forum,

                  ich denke, dass ich die Lösung gefunden habe...


                  In meiner Hauptseite (index.php) im HEAD habe ich folgende Befehle implementiert:

                  PHP-Code:
                  <head>

                  <
                  scriptsrc="../assets/jquery.js"></script>
                  <scriptsrc="../assets/jquery-ui.js"></script>
                  <linkhref="../assets/jquery-ui.css"rel="stylesheet">
                  <!-- <linkrel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
                  <scripttype="text/javascript"charset="utf8"src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script> -->

                  <linkrel="stylesheet"href="../assets/jquery.dataTables.min.css">
                  <scriptsrc="../assets/jquery.dataTables.min.js"></script>

                  <script>
                  $(document).ready(function() {

                  var table = $('#example').DataTable({
                  "ajax": "data.php",
                  "bPaginate": true,
                  "bProcessing": true,
                  "pageLength": 5,
                  "pagingType": "full_numbers",
                  "language": {
                  "url": "../assets/German.json"
                  },
                  "columns": [{
                  mData: 'datum'
                  },
                  {
                  mData: 'rechnungsnummer'
                  },
                  {
                  mData: 'kunde'
                  }
                  ]
                  });

                  setInterval(function() {
                  table.ajax.reload(null, false);
                  }, 15000);
                  });
                  </script>

                  </head> 
                  Für den Refresh sind nur die Befehle ab columns relevant. Den Aktualisierungsintervall kann jeder beliebig in der Funktion setInterval einstellen.


                  Die HTML-Tabelle (auch in der gleichen Datei)

                  PHP-Code:
                  <tableclass="container"id="example"class="display">
                  <thead>
                  <tr>
                  <th>
                  <h1>ANGELEGT AM</h1>
                  </th>
                  <th>
                  <h1>RECHNUNG-NR.</h1>
                  </th>
                  <th>
                  <h1>KUNDE</h1>
                  </th>
                  </tr>
                  </thead>
                  <tbody>
                  <?php
                  include('conn.php');

                  $sql 'select * from ausgangsrechnungen';
                  $query mysqli_query($conn$sql) or die("Anfrage fehlgeschlagen: "mysql_error());

                  while(
                  $row=mysqli_fetch_array($query)){
                  ?>
                  <tr>
                  <td><?php echo $row['datum']; ?></td> <td><?php echo $row['rechnungsnummer']; ?></td>
                  <td><?php echo $row['kunde']; ?></td>

                  Die Anzahl der Spalten/Zeilen muss mit der SQL-Abfrage übereinstimmen. Ansonsten bekommt man eine Fehlermeldung (Uncaught TypeError: c is undefined).

                  data.php

                  PHP-Code:
                  <?php
                  include('conn.php');
                  $sql "select * from ausgangsrechnungen";
                  $resultset mysqli_query($conn$sql) or die("database error:"mysqli_error($conn));
                  $data = array();
                  while( 
                  $rows mysqli_fetch_assoc($resultset) ) {
                  $data[] = $rows;
                  }
                  $results = array(
                  "sEcho" => 1,
                  "iTotalRecords" => count($data),
                  "iTotalDisplayRecords" => count($data),
                  "aaData" => $data
                  );
                  echo 
                  json_encode($results);
                  ?>
                  Die Datei conn.php beinhaltet nur den Datenbankverbindungsaufbau:

                  PHP-Code:
                  $conn mysqli_connect("server","user","","tabellenname");
                  if (
                  mysqli_connect_errno())
                  {
                  echo 
                  "Failed to connect to MySQL: "mysqli_connect_error();


                  Kommentar


                  • #10
                    Na sehr schön, endlich mal jemand, der die Ratschläge beherzigt und selbst denkt. Es gibt hier und da noch Verbesserungsmöglichkeiten, aber im Großen und Ganzen passt das so.

                    Eins vielleicht noch: Statt die SQL Abfrage auch in der index.php auszuführen, kannst du auch gleich beim ersten Aufruf einmal reload ausführen und sparst dir damit das Extra-PHP in der index.php

                    HTML-Code:
                    setInterval(function() {
                    table.ajax.reload(null, false);
                    }, 15000);
                    // hier:
                    table.ajax.reload(null, false);
                    Tutorials zum Thema Technik:
                    https://pilabor.com
                    https://www.fynder.de

                    Kommentar


                    • #11
                      Zitat von Andreas Beitrag anzeigen
                      Na sehr schön, endlich mal jemand, der die Ratschläge beherzigt und selbst denkt. Es gibt hier und da noch Verbesserungsmöglichkeiten, aber im Großen und Ganzen passt das so.

                      Eins vielleicht noch: Statt die SQL Abfrage auch in der index.php auszuführen, kannst du auch gleich beim ersten Aufruf einmal reload ausführen und sparst dir damit das Extra-PHP in der index.php

                      HTML-Code:
                      setInterval(function() {
                      table.ajax.reload(null, false);
                      }, 15000);
                      // hier:
                      table.ajax.reload(null, false);
                      Einen sehr großen Dank nochmal an Dich und den anderen Usern hier, die stets immer zu Hilfe eilen.

                      Es gibt Situation, vor allem bei neuen Themen und Problemstellungen, wo man einfach extremviel Zeit verliert, indem man nach einer funktionierenden Lösung sucht. Oft ist es auch so, dass man der Lösung schon ganz nahe gekommen ist und es klappt einfach nicht, weil man die Syntax (Komma, Stichkomma etc.) falsch gesetzt hat. Wenn man dann Hilfestellung bekommt oder nur einen kleinen Tipp, ist das schon sehr Hilfreich.

                      Kommentar


                      • #12
                        wo man einfach extrem viel Zeit verliert
                        Ich verstehe genau was du meinst... wenn man ein Ziel vor Augen hat, erscheint einem der Weg dahin manchmal zu lang... Wenn du jedoch keine Deadline hast, ist in LERNEN investierte Zeit nie verlorene Zeit Wenn du des Englischen mächtig bist, ist hier ein Artikel, den ich vor kurzem darüber geschrieben habe: https://pilabor.com/blog/2021/05/lea...ot-frameworks/
                        Nach über 15 Jahren Entwicklung ist mir soviel klar geworden: Der Weg ist das Ziel...
                        Tutorials zum Thema Technik:
                        https://pilabor.com
                        https://www.fynder.de

                        Kommentar


                        • #13
                          Zitat von Andreas Beitrag anzeigen
                          Ich verstehe genau was du meinst... wenn man ein Ziel vor Augen hat, erscheint einem der Weg dahin manchmal zu lang... Wenn du jedoch keine Deadline hast, ist in LERNEN investierte Zeit nie verlorene Zeit Wenn du des Englischen mächtig bist, ist hier ein Artikel, den ich vor kurzem darüber geschrieben habe: https://pilabor.com/blog/2021/05/lea...ot-frameworks/
                          Nach über 15 Jahren Entwicklung ist mir soviel klar geworden: Der Weg ist das Ziel...
                          Hallo Andreas,
                          vielen Dank für den Link. Ich werde mir das selbstverständlich durchlesen. Es ist manchmal ein harter und steiniger Weg. Vor allem, wenn man das autodidaktisch macht, können kleine Dinge sehr viel Zeit kosten. Apropos Zeit: vielleicht weißt du oder ein anderer das:


                          Ich hatte in meiner Tabelle zwei Buttons ( hier genauer https://www.php.de/forum/webentwickl...%A4tigen-in-js beschrieben) eingebunden.


                          <td>

                          <formstyle="white-space: nowrap; display: inline-block;"action="edit.php"method="post"
                          target="theWin"onsubmit="window.open('','theWin','height=800,width=450');">
                          <inputtype="hidden"name="id"value="<?php echo $row['id']; ?>">
                          <inputclass="button button2"type="submit"value="BEARBEITEN">
                          </form>
                          <formstyle="white-space: nowrap;display: inline-block;"action=" delete.php"method="post">
                          <inputtype="hidden"name="id"value="<?php echo $row['id']; ?>">
                          <inputclass="button button3"type="submit"value="LÖSCHEN"onclick="archiveFunction()">
                          </form>

                          <script>
                          function archiveFunction() {
                          event.preventDefault();
                          var form = event.target.form;
                          swal({
                          title: "Möchten Sie den Datensatz löschen?",
                          text: "Sind Sie sich sicher?",
                          type: "warning",
                          showCancelButton: true,
                          confirmButtonColor: "#DD6B55",
                          confirmButtonText: "löschen!",
                          cancelButtonText: "Nicht löschen!",
                          closeOnConfirm: false,
                          closeOnCancel: false
                          },
                          function(isConfirm) {
                          if (isConfirm) {
                          form.submit();
                          } else {
                          swal("Vorgang abgebrochen", "Wurde nicht gelöscht.", "info");
                          }
                          });
                          }
                          </script>


                          </td>


                          Wie kann ich die Buttons hier abbilden?

                          <script>
                          $(document).ready(function() {
                          var table = $('#example').DataTable({
                          "ajax": "data.php",
                          "bPaginate": true,
                          "bProcessing": true,
                          "pageLength": 10,
                          "pagingType": "full_numbers",
                          "language": {
                          "url": "../assets/German.json"
                          },
                          "columns": [
                          {
                          mData: 'datum'
                          },
                          {
                          mData: 'rechnungsnummer'
                          },
                          {
                          mData: 'kunde'
                          },
                          {
                          mData: 'vorname'
                          },
                          {
                          mData: 'name'
                          },

                          ------>> ?????????


                          Mit mDate funktioniert das leider nicht. Es handelt sich um den exakten Code wie im Beitrag #9

                          Über jeden Tipp und Hinweis wäre ich sehr dankbar.

                          Kommentar


                          • #14
                            Ich konnte das Problem, welches ich bei #13 erwähnt habe, mittlerweile lösen. Zur Erinnerung und kurz zusammengefasst: Ich hatte meine Datatabels auf automatisches Refresh gestellt. Das hat bei den normalen Zeilen, wo nur etwas zum Ausgeben war, sehr gut funktioniert (siehe Beitrag #9). Nur bei einem Button, muss man etwas anders vorgehen. In meinem Beispiel habe ich ein Edit und Löschen-Button eingebaut.


                            .
                            .
                            .

                            {
                            mData: 'ort'
                            },
                            {
                            mData: null,
                            mRender: function(data, type, row, meta) {
                            // return '<a href="hallo"/' + o.userid + '>' + 'Edit' + '</a>';
                            var table = $('#example').DataTable();
                            var data = table.row(0).data();

                            return '<form style="white-space: nowrap; display: inline-block;" action="edit.php" method="post" target="theWin" onsubmit="window.open(\'\',\'theWin\',\'height=800 ,width=450\');"> <input type="hidden" name="id" value="' +
                            row.id +
                            '"><input class="button button2" type="submit" value="Edit"> </form>' +

                            '<form style="white-space: nowrap;display: inline-block;" action=" delete.php" method="post"><input type="hidden" name="id" value="' +
                            row.id +
                            '"><input class="button button3" type="submit" value="Delete" onclick="archiveFunction()"></form>';

                            }
                            }


                            ]
                            });
                            setInterval(function() {
                            table.ajax.reload(null, false);
                            }, 5000);
                            table.ajax.reload(null, false);
                            });
                            </script>


                            Den <td></td> Bereich habe ich auskommentiert. Spaltenname ( <th> <h1>MEINE BUTTONS</h1> </th> ) muss natürlich weiterhin bestehen bleiben, ansonsten kommt es zu einem Fehler.


                            Damit habe ich jetzt erstmal meine Mindestanforderungen erfüllt. Danke an soweit.!


                            Kommentar


                            • #15
                              Aber gern
                              Tutorials zum Thema Technik:
                              https://pilabor.com
                              https://www.fynder.de

                              Kommentar

                              Lädt...
                              X