Das erste JavaScript - DataTables MultiFilter

  • Hallo Leute,

    ich bin neu hier und auch im Bereich JavaScript Einbindung.
    HTML und CSS bekomme ich schon ganz gut hin, sowohl verstehen als auch schreiben.
    JavaSrcipte sind aber bis heute ein rotes Tuch, nun benötige ich für ein Projekt eine Tabele welche ich durchsuchen oder Filter kann.

    Dazu habe ich hier im Forum https://datatables.net/examples/api/multi_filter.html diese Seite gefunden.
    In der Vorschau ist es auch genau das was ich gerne haben würde, ich bekomme es aber einfach nicht ans laufen.

    Aktuell habe ich im Phoenix Editor folgendes gemacht, CSS Code in meine CSS eingefügt.
    Die HTML Tabelle als platzhalter in meine Testseite eingefügt und den Code aus dem Bereich JavaScript in meine script.js eingefügt.
    Anschließend habe ich noch die Bibliotheksdateien geladen und in meinem Projektordner platziert.

    Nun ist es aber so das ich immer nur die HTML Tabelle angezeigt bekomme aber die Java Funktion nicht.
    Ich habe schon viel im Netz geschaut, jedoch bekomme ich es mit <script> und dann das Script oder auch mit <script src=script.js> auch nicht ans laufen.

    Kann mir bitte jemand erklären wie ich das ganze als laufen bekomme?
    Aktuell habe ich wirklich keine Idee wie ich weiter kommen soll, ich glaube ich habe einfach einen Denkfehler.
    Leider habe ich mich im Kopf so verannt das ich allein wohl nicht weiter komme.

    Danke und Liebe Grüße

    Kaspar

  • Guten Morgen Kaspar und willkommen im Forum!

    Folgende Hinweise zu deinem Problem:

    • Bist Du schon mit der Console vertraut? Rechtklick auf der Seite und dann "(Element) untersuchen". Dort bekommst Du Fehlermeldungen, die dir zeigen, wo genau Du suchen musst.
    • Datatables ist bewährt und sehr gut, aber auch ein wenig in die Jahre gekommen. Es gibt eine Alternative, die einfacher anzuwenden ist und kein jQuery braucht: https://tabulator.info/ Da Du ganz am Anfang ist, empfehle ich, gleich damit einzusteigen. Auch die spaltenspezifische Filterung ist ganz einfach mit einem headerFilter:"input" zu machen.
    • Wenn Du anfängst, lässt Du am besten erst Mal alle Erweiterungen weg und bringst es so zum Laufen. Bei Tabulator findest Du ein "Getting Started" - "Quick Start".

    Wenn Du dann noch nicht zum Ziel kommst, poste dein HTML, JS und CSS hier. Oder, noch besser, bring es online, damit man es live untersuchen kann.

    Beste Grüße, Ulrich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!