Durchsuchbare Tabelle

  • Hallo zusammen


    Ich würde gerne auf meiner Homepage eine Tabelle einrichten, die nach einzelnen Spalten durchsucht werden kann.


    Ich habe bei https://www.w3schools.com/howto/howt...lter_table.asp schon herausgefunden, wie man eine "Filter Table" einrichten kann, da wird aber jeweils nur eine Spalte durchsucht. Dabei ist auch angegeben, dass wie man jeweils einrichten kann, dass eine bestimmte Spalte durchsucht wird, aber eben immer nur eine.



    Mein Ziel wäre nun eine dropdown-Liste zu haben, aus welcher man auswählen kann, welche Spalte man durchsuchen will, und dann diese durch Texteingabe durchsuchen kann.

    Ich würde mich freuen, wenn mir hier jemand helfen kann.


    Beste Grüße

  • Vielen Dank sempervivum

    Ich habe mir das einmal angesehen. Wenn ich das richtig erkannt habe, kann man damit aber eine Tabelle vollständig nach einer bestimmten Buchstabenfolge durchsuchen.


    Ich möchte allerdings eine bestimmte Spalte wählen können, in dem Beispiel oben z.B. Name oder Position oder Office und dann diese Spalte einzeln durchsuchen können. Wenn ich nur kurze Buchstabenfolgen suchen will, erhalte ich ansonsten zu viele Ergebnisse.

  • Vielen Dank. Du bist immer superschnell.

    Habe mir das jetzt mal angesehen und habe es auch tatsächlich fast geschafft.

    Jetzt sieht es so aus wie auf dem Screenshot.

    Ich würde jetzt nur noch gerne das allgemeine Suchfeld nach links rübernehmen und die Auswahl der Einträge daran anschliessend.

    Wo finde ich die? Ich sehe im HTML nichts.

    Sorry für die dummen Fragen.


    html-seminar.de/woltlab/attachment/1380/

  • Ich kenne die Bibiliothek nicht ,Aberkuck doch malin den eingebundenen Scripten ob da der Such Button erstellt wird und positioniert. Position kann (wird?) aber auch in der Css stehen von der bibiliothek

  • Die Positionen kannst Du sehr leicht vertauschen, indem Du im CSS bei float left und right vertauschst:

    Code
    .dataTables_wrapper .dataTables_filter {
        float: left;
        text-align: right;
    }
    .dataTables_wrapper .dataTables_length {
        float: right;
    }
  • Da passiert bei mir nichts. Wie kann das sein?


    Wenn ich mit dem "Inspektor" suche, dann zeigt es mir folgenden Code an. Das finde ich aber nirgends in meinen Files. Das müsste doch im HTML stehen. Oder wo sonst?


    Code
    <div id="example_filter" class="dataTables_filter"><label>Search:<input class="" placeholder="" aria-controls="example" type="search"></label></div>
  • Das ist häufig so bei Bibliotheken: Elemente werden dynamisch durch Javascript angelegt, dann sind sie im HTML-Inspektor sichtbar aber nicht im Quelltext.

    Das CSS hatte ich getestet, vielleicht funktioniert es bei dir nicht, weil die Klassen anders sind. Ich untersuche es mal.

  • Ich habe nun deinen Text in den Abschnitt style im HTML eingegeben damit mein CSS nicht mehr dazwischenfunkt.

    Jetzt sind beide links, allerdings direkt beieinander. Wenn noch irgendwie möglich, hätte ich aber lieber das Suchfeld ganz links und dann die Angabe wieviele Entries angezeigt werden sollen (nörgel, nörgel)


    Und wo kann ich die Anzahl entries, die angezeigt werden sollen ändern? Und die Beschriftung?

    Und wichtigste Frage: Wie mache ich es, dass ich das ganze auf eine Tabelle mit mehr Kolumnen übertragen kann?


    Danke schon mal.

    Beste Grüße

  • Wenn sie direkt beieinander sind, hast Du wahrscheinlich für beide das gleiche float angegeben. In dem Fall kannst Du einen Abstand durch ein margin herstellen.

    Zitat

    Und wo kann ich die Anzahl entries, die angezeigt werden sollen ändern?

    Werte in der Dropdown-Liste:

    https://datatables.net/reference/option/lengthMenu

    Anfangswert:

    https://datatables.net/reference/option/pageLength


    Zitat

    Wie mache ich es, dass ich das ganze auf eine Tabelle mit mehr Kolumnen übertragen kann?

    Ich erwarte, dass das selbst anpassend ist, d. h. die Parameter werden aus der Tabelle gelesen und daraus die Suchfelder aufgebaut.

    Ist jedenfalls in diesem Beispiel so, wenn man sich das JS ansieht:
    https://datatables.net/examples/api/multi_filter.html


    Zitat

    Und die Beschriftung?

    Findest Du ebenfalls in den Optionen unter "Internatianalization":
    https://datatables.net/reference/option/

  • Vielen Dank. Ich habe zwar leider noch gar keine Ahnung von javascript. Mit deiner Hilfe hab ich es nun aber so weit wie ich es möchte.

    Nur noch eine Frage: Wo liegt hier der Fehler?

    Code
    var table = $('#example').DataTable({
        "language": {
                      "url": "dataTables.german.lang",
                      "lengthMenu": [ 25, 50, 100, 200 ],
                        "pageLength": 50  }
  • 1. Wenn ich es richtig sehe, sind lengthMenu und pageLength keine Elemente des language-Objektes sondern direkte Optionen von datatables.

    2. Damit man url nutzen kann, muss man die Datei auf dem eigenen Server bereit stellen. Einfacher als das ist es wahrscheinlich, das language-Objekt direkt in den Optionen anzugeben, es sind ja nicht so viele Elemente. Hat man viele Tabellen mit datatables kann es jedoch angebracht sein, sie zentral einer Datei zu halten und mit URL zu laden.

    Dies funktioniert bei mir:

  • Das du viel float und feste breiten benutzt macht es nicht leichter.

    Du solltest vieleicht mal alles mit Flexbox umsetzen das erleichtert dir vieles.

    Schnelle Lösung

    Code
    div#content {
        display: flex;
    }

    und hier alles Löschen bis auf das Padding

    CSS
    #column2 {
      /*  float: none !important;
        float: right;
         margin-left: 192px !important; 
        margin-left: 0;*/
        padding: 12px 40px 30px 9px;
    }

Jetzt mitmachen!

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