<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<div>
<noscript>
<div id="nojavascript" style="color:red;" >
<b>Um die Tabelle mit den Wasserhärteangaben sehen zu können, aktivieren Sie bitte JavaScript in Ihren Browsereinstellungen....</b></div>
<br />
</noscript>
</div>
<label for="suche">Suchbegriff Ort oder PLZ eingeben</label>
<div>
<table
id="table"
data-toolbar="#toolbar"
data-url="chdata.json"
data-search="true"
data-filter-control="true"
data-show-search-clear-button="true"
data-check-on-init="true"
data-show-pagination-switch="true"
data-pagination="true"
data-page-list="[10, 25, 50, 100, all]"
>
<thead>
<tr>
<th data-field="Ort" data-sortable="true" >Ort</th>
<th data-field="PLZ" data-filter-control="PLZ" data-sortable="true" >PLZ</th>
<th data-field="Härte in °fH" >Härte in °fH</th>
<th data-field="Kanton" data-sortable="true">Kanton</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#table').bootstrapTable()
})
</script>
Alles anzeigen
Damit keine Teile des obigen Codes beim abspeichern des Beitrages automatisch gelöscht werden:
Den Editor des Benutzers z.B. auf "Editor keiner" einstellen.
Die Datei chdata.json muß im joomla-root Dateiordner der Website natürlich vorhanden sein.
Eventuell könnte es natürlich bei Websiten die weitere Erweitungen benutzen zu Javasciptfehler kommen, insbesondere wenn die Erweiterung auch jquery benutzt.
Um nicht von externen Dateien abhängig zu sein usw... :
Die im obigen Codebeispiel extern eingebundenen css und js Dateien kann man natülich auch auf der lokalen Website in einem Dateiorder speichern und die URL-Adressen zu diesen Dateien im Code entsprechend abändern.
Übrigens kenne ich mich mit Bootstrap-Table aber eigentlich gar nicht aus und habe es auch sonst noch nie verwendet und nur zufällig gefunden!