Bootstrap Tabelle erstellen mit Sortierfunktion

[Tommy Herrmann]

Vielleicht kann das mal jemand gebrauchen.

Ich habe hier eine ganz einfache, eigene Bootstrap-Tabelle erstellt, da das mit den Mobirise-Tabellen ein ewiger Ärger ist.

Insbesondere weil "Mobirise5" mit "Bootstrap5" bisher gar keine Tabelle anbietet und die alen "Mobirise4 Tabellen" in "Mobirise5" Themen eben teilweise nicht das Aussehen und die Funktionen haben, das man gerne hätte.

Mit einem JavaScript in reinem "Vanilla JavaScript" ist diese Tabelle auch sortierbar.

https://www.mobirise-tutorials.com/Test ... ml#Tabelle

[Tommy Herrmann]

Ich habe heute noch ein JavaScript zum Sortieren jeder einzelnen Spalte einer herkömmlichen Bootstrap-Tabelle hinzugefügt.

Man kann auch auf- und absteigend bereits beim Aufruf der Seite vorsortieren und auch Spalten beim Sortieren kombinieren, also z.B. innerhalb des gleichen Datums auch noch nach Name sortieren.

Das scheint das absolut optimale JavaSkript zu sein und wie gemacht für "Mobirise5"

https://www.mobirise-tutorials.com/Tuto ... belle.html

Danke an Jürgen von j-berkemeier.de, der dieses geniale Skript entwickelt hat. Ich habe auch bereits Kontakt zum Jürgen aufgenommen und eine kleine Anerkennung überwiesen. Sein Skript "TableSort.js" fasziniert mich erheblich

[Tommy Herrmann]

... ich habe nun eine erweiterte Sortierung eingebaut und man kann nun alle Felder beliebig (ASC / DESC) auch vorsortieren.

Auch innerhalb einer Vorsortierung, von zum Beispiel der Spalte "Datum", kann man nun zusätzlich auch weitere Spalten vorsortieren, so wie in meinem Beispiel die Spalte "Name".

Weiterhin habe ich noch eine Such-Funktion (Filter) für die Tabelle eingebaut:

https://www.mobirise-tutorials.com/Tuto ... belle.html

Somit kann man sich von den teilweise nicht richtig funktionierenden und sehr komisch dargestellten Tabellen von Mobirise lösen und seine eigene Tabelle erstellen - insbesondere für "Mobirise5" Themen, bei denen es immer noch gar keine eigene Tabellen-Blöcke gibt.

[Tommy Herrmann]

Ich habe jetzt noch meine Tabellen-Seite für meine Tutorial-Übersicht erstellt.

Darum ging es mit im Eigentlichen, denn bisher bietet Mobirise nur ein sehr fehlerhafte Tabelle für "Mobirise5" ("Bootstrap5") Themen an.

Ja - schlimmer - es gibt eigentlich keine einzige Tabelle für "M5" Themen, es sei denn, man verwendet jene Tabellen aus "Mobirise4" Themen, die mit einem jQuery-Script erdacht waren, was es nicht mehr gibt. Dabei sind aber viele Fehler bisher von Mobirise, trotz vieler Meldungen, einfach ignoriert worden.

Ich arbeite jetzt bestimmt seit ca. 40 Stunden an dieser Tabelle und finde eigentlich, dass es sehr gut geworden ist

https://www.mobirise-tutorials.com/Tuto ... rview.html

Mit einem Script vom Jürgen (j-berkemeier.de) ist es möglich diese Tabelle in jeder Spalte zu sortieren und auch vorzusortieren (das kann Mobirise gar nicht), sodass Spalten bereits beim Aufruf der Seite entweder auf- oder absteigend vorsortiert sind. Eine Kombination dieser Sortierung ist auch möglich, also z.B. alphabetische Namen innerhalb des gleichen Datums.

Mit einem Script von unserem Werner (werner-zenk.de) ist eine Suche, bzw. das Filtern von Einträgen komfortabel möglich.

Alle Scripts und den Einbau erkläre ich ausführlich in meinen Tutorials zu dieser Tabelle.

Weiterhin habe ich ein Script zum automatischen Zählen der vorhandenen Einträgen erstellt und die Tabelle ist für das mobile Gerät optimiert, man kann diese dort auch horizontal scrollen.

In diesem Beispiel zeige ich meine z.Zt. 119 Einträge in einer scrollbaren Tabelle, bei der die Header-Reihe fixiert oben in einem Seitenbereich (div) angeheftet bleibt.

Nachdem man diese Tabelle erst einmal eingebaut hat, ist es sehr einfach und komfortabel diese Tabelle zu pflegen und zu erweitern, indem man einfach einen oder eine Gruppe von Einträgen unten ran kopiert.

Das geht eigentlich sogar einfacher und schneller als über die alte Tabelle von Mobirise, die dafür eine sehr begrenzte Anzahl von Einträgen in den Werkzeugen vorgesehen hat. Bei 500 Einträgen geht mit Mobirise gar nichts mehr.

Mobirise verwendet schon in Version 4 ein Drittanbieter-Script dafür und auch in Version 5. Mobirise ist anscheinend etwas überfordert diese Skripte brauchbar anzupassen.

[Tommy Herrmann]

... ich möchte mich an dieser Stelle nochmals bei Werner-Zenk.de für das sensationelle Script zum Filtern der Tabelle bedanken.

Werner hat mir dazu auch noch die Zählung der gefilterten und Gesamteinträge programmiert:

https://www.mobirise-tutorials.com/Tuto ... rview.html


Das Script:

Code: Alles auswählen

<!-- Table filter by Werner-Zenk.de -->  
<script>
let myOutput = document.getElementById('myOutput');
let myTable = document.getElementById("myTable");
let ofilter = myTable.querySelectorAll("tbody tr").length;
myOutput.textContent = `Diese Tabelle enthält ${ofilter} Einträge.`;

// Filter HTML table
document.querySelectorAll(".filter-table").forEach(function (input) {
  var table = document.querySelector(input.dataset.for);
  var rows = table.querySelectorAll("tbody tr");
  input.addEventListener("input", () => {
    rows.forEach(function (tr) {
      if (input.value.length > 0) {
        if (input.value[0] == input.value[0].toUpperCase()) {
          tr.hidden = !tr.textContent.includes(input.value);
        } else {
          tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());
        }
      } else {
        tr.hidden = !tr.textContent.includes(input.value);
      }
    });
    
    let filter = ofilter - myTable.querySelectorAll("tr[hidden]").length;
    myOutput.textContent = `Diese Tabelle zeigt ${filter} von ${ofilter} Einträgen.`;
  });
});
</script>

Die Ausgabe:

Code: Alles auswählen

<span id="myOutput"></span>

Das Ergebnis:

Ebenso gut kann man diese Zählung auch an anderer Stelle zeigen, hier oben: