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.459   Beiträge: 428.482   Mitglieder: 27.877   Aktive Mitglieder: 60
        Willkommen an unser neuestes Mitglied, jorna2a.

        Online-Benutzer

        Einklappen

        636 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 635.

        Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        SimpleSite

        Die neuesten Beiträge

        Einklappen

        Lädt...
        X