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.


    tabelle.jpg

  • 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
    1. <div id="example_filter" class="dataTables_filter"><label>Search:<input class="" placeholder="" aria-controls="example" type="search"></label></div>
  • 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
    1. var table = $('#example').DataTable({
    2. "language": {
    3.    "url": "dataTables.german.lang",
    4.         "lengthMenu": [ 25, 50, 100, 200 ],
    5.                 "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
    1. div#content {
    2. display: flex;
    3. }

    und hier alles Löschen bis auf das Padding

    Code
    1. #column2 {
    2. /* float: none !important;
    3. float: right;
    4. margin-left: 192px !important;
    5. margin-left: 0;*/
    6. padding: 12px 40px 30px 9px;
    7. }