Ankündigung

Einklappen
Keine Ankündigung bisher.

Tablepress Filterfunktion mit Buttons

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

  • Tablepress Filterfunktion mit Buttons

    Hallo allerseits. Ich bin leider ein blutiger Anfänger und verstehe manches noch nicht, deswegen folgendes Problem:
    Ich habe eine Tablepresstabelle, in der in einer Spalte Sprachen stehen. Die können mit Buttons gefiltert werden (basierend auf folgender Vorlage (https://www.w3schools.com/howto/howt...r_elements.asp) . Folgende Probleme ergeben sich für mich dabei, die ich auch durch probieren und recherchieren nicht so richtig lösen konnte.
    1. Wie kann man mehrere Buttons gleichzeitig aktivieren ohne das sie sich gegenseitig ausschließen? Konnte dafür keinen Code finden und hatte schon darüber nachgedacht, auf Checkboxen umzusteigen. Aber dann müsste ich das ganze Skript anpassen und das kann ich noch nicht.
    2.1 Welche Funktion ermöglicht es, nur die Zeilen in der Tablepress anzeigen zu lassen, für die eine Sprache ausgewählt wurde?
    2.2 Und wie kriege ich hin, dass von Anfang an der Button mit 'Alle' aktiviert ist? Habe zwar die html-Zeile class="btn active" dort drinne stehen, aber auf der Seite ist er dann doch nicht aktiv.
    3. Wie bekomme ich es hin, die Elemente in der Tabelle nebeneinander anzuordnen? (siehe Bild) Habe zwar versucht, das mit dem CSS display und float zu machen, aber egal was ich probiert habe, er zeigt es mir so an. Die Zelle ist auf jeden Fall groß genug.

    Wäre mir eine verdammt große Hilfe für jede Antwort darauf. Danke schon mal im voraus.

  • #2
    Tablepress lese ich zum ersten Mal. Ich finde da ein Wordpress-Plugin, das von der Tabelle her identisch mit datatables zu sein scheint. Aber die Vorlage bei w3schools scheint ganz etwas anderes zu sein? Wenn Du das Ganze online hast, poste die URL, wenn nicht, das HTML, CSS und Javascript, denn nach dem Bild scheint deines ja etwas anders zu sein.

    Kommentar


    • #3
      Danke für deine Hilfe. Nochmal zur Verständnis. Ich habe eine Tabelle. Über dieser Tabelle sind mehrere Buttons mit Sprachen, die ich als Filterfunktion nutzen will. Deswegen gibt es eine Spalte nur mit den Sprachen und wenn da mehr als eine drin steht, sieht das so aus, wie in dem beigefügtem Bild. Jetzt ist aber das Problem, das 1. der Button zum aktivieren aller Sprachen nicht voraktiviert ist, was er aber sein sollte, das 2. die buttons komisch angeordnet sind in den Zellen, wie auf dem Bild zu sehen sind, obwohl ich sie gerne übereinander hätte, 3. ich gerne die Möglichkeit hätte, mehrere Buttons gleichzeitig aktivieren zu können und 4. ich gerne die Zeilen ausgeblendet haben möchte, wenn in einer Zelle keine Sprachen zu sehen sind, weil man andere aktiviert hat. Jemand eine Idee wie man das macht?

      Hier die Codes:
      CSS

      .container {
      overflow: auto;
      }

      .filterDiv {
      background-color: #000080;
      float: left;
      color: #ffffff;
      width: 110px;
      line-height: 20px;
      text-align: center;
      display: none;

      .show {
      display: block;
      }

      .btn {
      border: none;
      outline: none;
      padding: 12px 12px;
      background-color: #f1f1f1;
      cursor: pointer;
      }

      .btn:hover {
      background-color: #ddd;
      }

      .btn.active {
      background-color: #666;
      color: white;
      }

      Javascript
      filterSelection("all")
      function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
      for (i = 0; i < x.length; i++) {
      w3RemoveClass(x[i], "show");
      if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
      }

      // Show filtered elements
      function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
      }
      }
      }

      // Hide elements that are not selected
      function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
      while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
      }
      }
      element.className = arr1.join(" ");
      }

      // Add active class to the current control button (highlight it)
      var btnContainer = document.getElementById("myBtnContainer");
      var btns = btnContainer.getElementsByClassName("btn");
      for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
      });
      }

      HTML
      <div id="myBtnContainer">
      <button class="btn active" onclick="filterSelection('all')"> Alle</button>
      <button class="btn" onclick="filterSelection('deutsch')"> Deutsch</button>
      <button class="btn" onclick="filterSelection('englisch')"> Englisch</button>
      <button class="btn" onclick="filterSelection('russisch')"> Russisch</button>
      <button class="btn" onclick="filterSelection('niederländisch')"> Niederländisch</button>
      <button class="btn" onclick="filterSelection('französisch')"> Französisch</button>
      <button class="btn" onclick="filterSelection('skandinavisch')"> Skandinavisch</button>
      <button class="btn" onclick="filterSelection('Andere')"> Andere</button>

      </div>
      Und in der Tabelle halt als Beispiel: <div class="container">
      <div class="filterDiv deutsch">Deutsch</div>
      Zuletzt geändert von M4tr0s3; 27.02.2019, 14:33.

      Kommentar


      • #4
        Zu 1): Das ist sicher der richtige Weg, auf Checkboxen umzustellen. Bei dem Beispiel auf w3schools ist das auch plausibel, man kann ja mehrere Kriterien auswählen (Auto und grün) und nur die Elemente anzeigen, für die alle zutreffen. Bei den Sprachen ist es jedoch weniger plausibel: Ein Text kann ja nur eine Sprache haben? Kannst Du das genauer erklären? Und ein paar mehr Zeilen aus deiner Tabelle posten, damit man es sich besser vorstellen kann.

        Kommentar

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 56.414   Beiträge: 428.247   Mitglieder: 27.803   Aktive Mitglieder: 72
        Willkommen an unser neuestes Mitglied, qieb111.

        Online-Benutzer

        Einklappen

        596 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 592.

        Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        • Rauch17
          Antwort auf Fliesen im Wohnzimmer
          Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
          Gestern, 19:07
        • Rauch17
          Antwort auf Geschenk fur Chefin?
          Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
          Gestern, 19:05
        • Rehnat
          Antwort auf Geschenk fur Chefin?
          Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
          Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
          Gestern, 12:48
        • Mr.Kennedy
          Antwort auf Webseite Domain Namen ändern?
          Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
          Gestern, 12:32
        • Localfu
          Antwort auf Überwachung der Website-Verfügbarkeit
          Hi Peter,
          ich kann das auch kostenlos machen ohne euer kostenpflichtiges Tool und einige Webhoster bieten das kostenlos zum Service an. Zudem sind die Ausfalzeiten extrem selten. Jenachdem welchen Webhoster man hat. CULA.IO wäre für mich keine Alternative und würde bei mir die Kosten unnütz...
          Gestern, 12:16

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X