DataTables DeferRender Ajax

  • PHP

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von windowsfan.

    DataTables DeferRender Ajax

    Guten Morgen,

    ich lese mehrere tausend Datensätze aus meiner Datenbank aus. Zum Anzeigen in eine Tabelle nutze ich DataTables, welches z.B. Echtzeitsuche, Blättern und Sortieren ermöglicht, was auch sehr gut funktioniert.

    Ich habe allerdings das Problem, dass ab ca. 1.000 Datensätzen die Seite Ewigkeiten braucht zum Laden und in dieser Zeit der Browser für einige Sekunden einfriert. Aktuell lese ich ca. 2.500 Datensätze aus und die Seite benötigt ca. 10 Sekunden und friert in der Zeit komplett ein.

    Grund dafür ist, dass alle Datensätze ausgelesen, ausgegeben und dann erst als DOM Event richtig "formatiert" werden (sprich, nur 10 Einträge pro Seite, alles andere wird geblättert). Dieses Formatieren benötigt sehr lange.

    Bei der Dokumentation von DataTables habe ich gesehen, dass es genau für dieses Problem die Option "deferRender" gibt, was dazu führt, dass eben nur die Einträge pro Seite geladen werden und alles andere dann nach und nach bei Bedarf geladen wird.
    Problem bei der Sache: Man benötigt wohl dabei zwingend Ajax. Schalte ich nämlich einfach nur die Funktion so ein, passiert nichts, er lädt genau so langsam.

    Meine Frage? Wie kann ich das denn per Ajax realisieren? Habe mit Ajax noch nicht so viel zu tun gehabt?

    Derzeit lese ich mittels PHP PDO nur die Daten aus und lasse sie in einer foreach Schleife ausgeben. Wie müsste ich das denn mit Ajax machen?

    Bin da zurzeit noch ein wenig überfragt. Muss ich einen Request machen mit Ajax und mir den String zurückgeben lassen?

    Danke im Voraus!
    Hier ein Fiddle:
    jsfiddle.net/fofuy4p1/1/

    Du musst mit dem Parameter Url auf ein Script linken das dir ein JSON array mit den Daten ausgibt.


    Das json sollte so aussehen (natürlich auf deine anforderungen angepasst)

    Quellcode

    1. {
    2. "Personen": [
    3. {
    4. "id": 1,
    5. "name": "Max Mustermann",
    6. "geburtstag": "2014-01-25T00:00:00.000Z"
    7. },
    8. {
    9. "id": 0,
    10. "name": "Erika Musterfrau",
    11. "geburtstag": "2014-02-12T00:00:00.000Z"
    12. },
    13. {
    14. "id": 3,
    15. "name": "Hans Mair",
    16. "geburtstag": "2014-03-01T00:00:00.000Z"
    17. }
    18. ]
    19. }