Beispiel vom Quellcode im Code Editor ohne Suchen Filter
Eigene sortierbare Bootstrap Tabelle
| # | Datum | Vorname | Name | Alter | Stadt | Postleitzahl | Strasse |
|---|---|---|---|---|---|---|---|
| 1 | 01.01.2021 | Mark | Williams | 67 | New York | 10004 | Broadway |
| 2 | 27.08.2022 | Jacob | Thornton | 24 | Boston | 02108 | Main Street |
| 3 | 10.10.2023 | Ludwig | Neumann | 39 | Berlin | 12161 | Rheinstrasse |
| 4 | 07.03.2023 | Hubert | Schulze | 45 | München | 81671 | Bad-Schachener-Strasse |
| 5 | 21.09.2023 | Max | Mustermann | 39 | Dresden | 01067 | Neumarkt |
| 6 | 07.03.2023 | Michelle | Peronet | 18 | Paris | 75018 | Rue Marcadet |
Tutorials zur Tabelle
nach oben
Diese Tabelle wurde nach einer ganz einfachen Bootstrap5 Tabelle erstellt und hat zusätzlich ein Script zum Sortieren erhalten. Diese Tabelle ist für mich eine Alternative der "Mobirise4" Themen, die in den Themen von "Mobirise5" nicht mehr korrekt funktioniert und auch nicht mehr vorhanden ist.
Guckt euch bei Bootstrap auch die möglichen CSS Klassen für Tabellen an, von denen ich hier auch drei angewendet habe:
class="table table-striped table-hover"
Der Tabellen-Generator von Werner-Zenk.de kann dabei eine große Hilfe sein, auch wenn diesem die Bootstrap-Klassen fehlen.
Diese Tabelle trägt an einem äußeren <div> die Bootstrap class="table-responsive", damit die Tabelle auch am Smartphone horizontal scrollbar ist und nicht zu eng zusammengeschoben wird. Also vom Schema dann so:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Damit durch die so horizontal scrollbare Tabelle am Smartphone kein Overflow (Überlauf) entsteht, müsst ihr das mit dieser Style-Anweisung unterbinden. Diese CSS Anweisung kopiert ihr in den Bereich "Inside <head> code" der Seiteneinstellungen:
<style>
html {
overflow-x: hidden;
}
</style>
Damit die Tabelle auf der Arbeitsseite von Mobirise editierbar ist, müssen die Tags <thead> und <tbody> noch das Mobirise Attribut "mbr-text" erhalten, also dann so:
<thead mbr-text>
<tbody mbr-text>
Damit die Worte nicht umbrechen, habe ich noch diese CSS im "Code Editor" im Bereich "CSS Editor" hinzugefügt:
thead, tbody {
white-space: nowrap;
}
nach oben
Vielen Dank an dieser Stelle an Jürgen für dieses großartige Script zum Sortieren der Tabelle. Das Script darf auch ohne eine Erwähnung auf der Webseite frei verwendet werden. Die Erwähnung und die Adresse in dem Script müssen erhalten bleiben. Das Script kann ansonsten beliebig modifiziert werden. Falls ihr zur Lizenz Fragen haben solltet, dann stellt Jürgen diese an seine E-Mail Adresse im Impressum seiner Seite.
Wenn ihr einen Link zu seiner Seite "j-berkemeier.de" setzt oder auch eine kleine Spende leistet, wäre Jürgen natürlich sehr dankbar.
Einen Link zur Lizenz und zu seinem PayPal Konto findet ihr unten auf seiner Seite.
Um die Tabelle sortieren zu können, müsst ihr die JavaScript Datei "TableSort.js" (hier: v10.11 vom 18.07.2023) mit der rechten Maustaste downloaden ("speichern unter") oder ihr könnt diese Datei natürlich auch bei "j-berkemeier.de" herunterladen.
Ich habe diese Datei hier in ein Verzeichnis "tablesort" kopiert und das in meinem lokalen Projektverzeichnis und auf den Server kopiert. Schreibt den Verweis zu dieser JavaScript Datei dann in den Seiteneinstellungen in den Bereich "End of <body> code":
<script src="./tablesort/TableSort.js"></script>
Gebt nun der Tabelle noch zusätzlich die class="sortierbar", die im JavaScript gegründet wird. Gebt ebenso jeder sortierbaren Spalte im Table-Head diese class="sortierbar". Nun kann durch Klick auf jede Header-Überschrift, der diese Class zugewiesen wurde, diese Spalte auch sortiert werden. Lasst diese Class weg, bei Spalten die nicht sortierbar sein sollen.
Der Spalte Datum habe ich zusätzlich die class="sortiere-" (mit Minus-Symbol am Ende) gegeben, so wird diese Spalte mit dem Aufruf der Seite bereits absteigend vorsortiert und auch der Pfeil bereits hervorgehoben angezeigt. So wird der neueste Eintrag nach Datum schon beim Aufruf der Seite vorsortiert oben angezeigt. Siehe zum Datum, Zeit und Zahlen auch die möglichen Zahlenformate, alles andere wird als Text interpretiert.
Man könnte auch die Einträge aufsteigend
vorsortieren, indem man einer Spalte die class="sortiere" hinzufügt, um z.B. die Namen alphabetisch darzustellen. Ich habe hier beide Klassen zusammen verwendet. Am 07.03.2023 wird also nicht nur das Datum vorsortiert, sondern innerhalb der vorsortierten Datums auch noch der Name.
<table class="table table-striped table-hover sortierbar">
<thead mbr-text>
<tr>
<th class="sortierbar" scope="col">#</th>
<th class="sortierbar sortiere-" scope="col">Datum</th>
<th class="sortierbar" scope="col">Vorname</th>
<th class="sortierbar sortiere" scope="col">Name</th>
<th class="sortierbar" scope="col">Alter</th>
<th class="sortierbar" scope="col">Stadt</th>
<th class="sortierbar" scope="col">Postleitzahl</th>
<th class="sortierbar" scope="col">Strasse</th>
</tr>
</thead>
...
Wer will, kann dann auch noch den Sortierpfeilen eine andere Farbe geben und diese CSS in den "CSS Editor" des Blocks schreiben, hier z.B.:
.sortsymbol svg {
color: #6ec7f2;
}
Unten als Beispiel eine verkürzte Tabelle meines Tabellen-Codes mit nur einem einzigen Eintrag im Tabellen-Body.
Das Attribut scope="col" gib an, dass diese Zelle eine Überschrift einer Tabellen-Spalte und das Attribut scope="row" eine Überschrift einer Tabellen-Row ist. Ihr könnt diese Attribute natürlich bei Bedarf auch wieder entfernen.
Kopiert bei Bedarf den rot markierten Body-Teil einer Tabellenreihe um neue Einträge hinzuzufügen - also vom und inklusive <tr> des öffnenden Table-Row, bis zum schließenden Table-Row Element des Body </tr>:
<div class="mbr-text mbr-fonts-style table-responsive" data-app-selector=".mbr-text" mbr-theme-style="display-7">
<table class="table table-striped table-hover sortierbar">
<thead mbr-text>
<tr>
<th class="sortierbar" scope="col">#</th>
<th class="sortierbar sortiere-" scope="col">Datum</th>
<th class="sortierbar" scope="col">Vorname</th>
<th class="sortierbar sortiere" scope="col">Name</th>
<th class="sortierbar" scope="col">Alter</th>
<th class="sortierbar" scope="col">Stadt</th>
<th class="sortierbar" scope="col">Postleitzahl</th>
<th class="sortierbar" scope="col">Strasse</th>
</tr>
</thead>
<tbody mbr-text>
<tr>
<th scope="row">1</th>
<td>01.01.2021</td>
<td>Mark</td>
<td>Williams</td>
<td>67</td>
<td>New York</td>
<td>10004</td>
<td>Broadway</td>
</tr>
</tbody>
</table>
</div>
nach oben
Mit dem Script von Werner-Zenk.de zum Filtern der Einträge, werden gleichzeitig die gefilterten und die Gesamteinträge gezählt. Für die Anzeige dieser Zählung kopiert ihr diese Ausgabe direkt unter oder auch über die Tabelle, wie in meinem zweiten Tabellen Beispiel. Dabei ist das äußere <p> Tag lediglich für den Schrifttyp zuständig. Die eigentliche Anzeige wird mit der Variable "myOutput" auf die id="myOutput" im Script gegründet.
<p style="color: #232323; font-size: 0.8rem;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
<span id="myOutput"></span>
</p>
Beispiel vom Quellcode im Code Editor ohne Suchen Filter
nach oben
Ich habe hier eine JavaScript von Werner-Zenk.de zum Filtern der Tabelleneinträge verwendet. Ich habe das Script noch leicht für die Anzeige am Bildschirm modifiziert. Vielen Dank an Werner an dieser Stelle.
Das Script ist so erstellt, dass man am besten nur mit Kleinbuchstaben sucht. Verwendet man dennoch Großbuchstaben, muss man die Unterscheidung auch beibehalten.
Beispiel für den Suchbegriff: MySQL
Geben ich ein "mysql" oder "MySQL" wird beides gefunden. Würde ich eingeben "Mysql" würde nichts gefunden werden.
Mit diesem Script werden ebenfalls die gefilterten als auch die Gesamteinträge der Tabelle errechnet. Kopiert dieses JavaScript in den Seiteneinstellungen zusätzlich in den Bereich "End of <body> code":
<!-- Table filter by Werner-Zenk.de modified by Tommy -->
<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;
// Output modified by Tommy
if (filter < ofilter) {
myOutput.textContent = `Diese Tabelle zeigt ${filter} von ${ofilter} Einträgen.`;
} else {
myOutput.textContent = `Diese Tabelle enthält ${ofilter} Einträge.`;
}
});
});
</script>
Das Eingabefeld für die Suche habe ich noch als <div> Bereich über den Code der Tabelle platziert und hier mit der meiner äußeren class="mydisplay" rechtsbündig gestellt.
Mit meiner zusätzlichen class="mywidth", innerhalb der class="input-group mb-3 mywidth", wird das Eingabefeld, der Außenabstand ("margin") und die Breite, je nach Displaygröße, gesetzt.
Hierfür habe ich diese zusätzlichen Media-Abfragen mit dieser CSS in den "CSS Editor" vom Block kopiert. Dadurch wird bei einem Display <= 767px das Eingabefeld links (start) in einer Breite von 100% der Zeilenbreite angezeigt (Smartphone). Ab einem Display >= 768px wird das Eingabefeld entsprechend rechts (end) in einer Breite von 50% dargestellt und ab >=1400px nochmals auf 25% der Zeilenbreite reduziert.
Beachtet, dass ich am Smartphone <=767px auch das "text-transform:" wieder ausgeschaltet (none) habe, das ich für das Eingabefeld auf Kleinbuchstaben gestellt habe. Am Smartphone muss für die Kleinbuchstaben die Tastatur entsprechend bedient werden.
Siehe die Breakpoints, die von Bootstrap in Mobirise verwendet werden. Das könnt ihr natürlich gestalten wie ihr wollt.
@media (max-width: 767px) {
.mydisplay {
display: flex;
justify-content: flex-start;
}
.mywidth {
width 100%;
}
input {
text-transform: none;
}
}
@media (min-width: 768px) {
.mydisplay {
display: flex;
justify-content: flex-end;
}
.mywidth {
width 50%;
}
}
@media (min-width: 1400px) {
.mywidth {
width 25%;
}
}
Das Eingabefeld <input> erhält unter anderem die class="filter-table" aus dem JavaScript zum Filtern und den Verweis auf die id="myTable" meiner Tabelle.
<div class="mydisplay">
<div class="input-group mb-3 mywidth">
<input type="search" class="form-control filter-table" id="myInput" data-for="#myTable" placeholder="Suche">
</div>
</div>
Dem Eingabefeld <input> habe ich dann noch ein wenig CSS gegeben. Hier einen Rahmen, 10px abgerundete Ecken, eine Hintergrundfarbe und einen anderen Cursor. Den Eingabetext zum Filtern habe ich auf Kleinbuchstaben gestellt, den vom Platzhalter dagegen nicht. Bei Mausüber (hover) und beim Klick (focus) die Hintergrundfarbe etwas heller. Das kann man natürlich beliebig gestalten.
input {
border: 1px solid #8ED3F5 !important;
border-radius: 10px;
background-color: #bde5f9;
cursor: default;
text-transform: lowercase;
&::placeholder {
text-transform: none;
}
}
input:hover {
background-color: #d1f0ff;
}
input:focus {
background-color: #d1f0ff;
}
Beispiel vom Quellcode im Code Editor mit Suchen Filter