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.375   Beiträge: 428.047   Mitglieder: 27.714   Aktive Mitglieder: 77
        Willkommen an unser neuestes Mitglied, Jugl.

        Online-Benutzer

        Einklappen

        621 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 618.

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

        Die neuesten Themen

        Einklappen

        • arnego2
          Antwort auf hreflang Tags
          2 Domains eins für Französisch eins für Deutsch.
          Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

          Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
          Gestern, 16:13
        • TheBablegum
          Meine Webseite, eure Meinung!
          Mooin,
          ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
          Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
          Sei es jetzt zum Layout, der...
          Gestern, 15:30
        • Sempervivum
          Antwort auf Ausgabe als Link
          Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
          Gestern, 14:22
        • Ingo
          Antwort auf Ausgabe als Link
          Hi,
          urlencode wird ggf. nicht funktionieren. Besser wäre wie gesagt eine ID abzufragen und in den Link zu setzen.

          Gruß
          Ingo
          Gestern, 13:13
        • Sempervivum
          Antwort auf Ausgabe als Link
          Grundprinzip müsste etwa so aussehen:
          PHP-Code:
          $titel urldecode($_GET['titel']);
          $interpret urldecode($_GET['interpret']);
          $sql "SELECT text FROM texte where titel='" $titel "' and interpret='" $interpret "'";
          foreach (
          $pdo->query($sql) as 
          ...
          Gestern, 10:31

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        • Atlan
          hreflang Tags
          Hallo,
          habe immer noch ein Problem mit den hreflang Tags

          unsere Seite: https://www.*****.com, besteht aus dem Deutschen Teil unter *****.com und dem französischen Teil unter *****.com/fr/.
          -----------
          <!DOCTYPE html>
          <html lang="de">
          ...
          23.03.2019, 16:41
        • arnego2
          Antwort auf hreflang Tags
          2 Domains eins für Französisch eins für Deutsch.
          Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

          Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
          Gestern, 16:13
        • TheBablegum
          Meine Webseite, eure Meinung!
          Mooin,
          ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
          Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
          Sei es jetzt zum Layout, der...
          Gestern, 15:30
        • Fragman
          Ausgabe als Link
          Hallo...

          habe eine Datenbank mit Songtexten mit Ausgabe auf einer Webseite. Es gibt eine Vorauswahl der Titel nach Buchstaben.
          Angezeigt wird dann eine Liste der Titel und des Interpreten.
          Wie mache ich aus der Ausgabe der Titel einen Link der dann den entsprechenden Text anzeigt??...
          21.03.2019, 21:05
        • Sempervivum
          Antwort auf Ausgabe als Link
          Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
          Gestern, 14:22
        • Rudolfo
          Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
          Also ich bin auch ein überzeugter Cloud-Nutzer. Deswegen würde ich dir die Ratgeber von G Data empfehlen. Dieser zeigt alle Angebote, wichtige Information und erklärt auch ein paar Hintergründe. Ich bin selber auch durch den Ratgeber auf die Option der Cloud aufmerksam geworden und er hat mich überzeugt....
          ☁ Fotos, Videos, Dokumente: Einfach in die Cloud laden und teilen.☀ Wir zeigen Ihnen, wie sie funktioniert und wie im Cloud-Speicher alles sicher bleibt! ☁
          Gestern, 14:20
        • Ingo
          Antwort auf Ausgabe als Link
          Hi,
          urlencode wird ggf. nicht funktionieren. Besser wäre wie gesagt eine ID abzufragen und in den Link zu setzen.

          Gruß
          Ingo
          Gestern, 13:13
        • Sempervivum
          Antwort auf Ausgabe als Link
          Grundprinzip müsste etwa so aussehen:
          PHP-Code:
          $titel urldecode($_GET['titel']);
          $interpret urldecode($_GET['interpret']);
          $sql "SELECT text FROM texte where titel='" $titel "' and interpret='" $interpret "'";
          foreach (
          $pdo->query($sql) as 
          ...
          Gestern, 10:31
        • Fragman
          Antwort auf Ausgabe als Link
          ..und jetzt die Frage aller Fragen:
          Wie sieht das als PHP-Code aus?????
          Gestern, 08:12
        • Sempervivum
          Antwort auf Ausgabe als Link
          Nein, überhaupt nicht: Du brauchst nur eine PHP-Seite, diese bekommt Interpret und Titel als Parameter übergeben, liest den Text aus der Datenbank und zeigt ihn an....
          23.03.2019, 18:58
        Lädt...
        X