Karstens Blog

Manchmal ist es besser, Tabellen filterbar zu machen. Hierzu nutze ich den JavaScript-Filter "TableFilter.js".

Zur Installation lege ich die JavaScript-Datei in das Verzeichnis <bl-themes>/<theme>/assets/js

In der Erstellungsphase eines Artikels lege ich zunächst eine "normale" Tabelle an. Über den Sourcecode kann ich die Tabelle dann anreichern.

• id der Tabelle muss "your-table-id" sein
• <thead> einfügen mit der Struktur der Tabelle- die id muss wiederum die gleiche wie oben sein, angefügt mit der Nummer der Spalte
• Unter ver Tabelle muss das JavaScript eingebunden werden.

Und los :-)

<table style="border-collapse: collapse; width: 99.959%; height: 46.8px;" border="1" id="your-table-id">
<thead>
<tr>
<th>Name<br><input type="text" size="3" id="your-table-id0" placeholder="Filter"></th>
<th>Brennweite min<br><input type="text" size="3" id="your-table-id1" placeholder="Filter"></th>
<th>Brennweite max<br><input type="text" size="3" id="your-table-id2" placeholder="Filter"></th>
<th>Blende<br><input type="text" size="3" id="your-table-id3" placeholder="Filter"></th>
<th>Bajonett<br><input type="text" size="3" id="your-table-id4" placeholder="Filter"></th>
</tr>
</thead>
<tbody>
<tr style="height: 18.4px;">
<td style="width: 16.7003%; height: 18.4px;">Obj1</td>
<td style="width: 16.7003%; height: 18.4px;">40</td>
<td style="width: 16.7003%; height: 18.4px;">150</td>
<td style="width: 16.7003%; height: 18.4px;">2.8</td>
<td style="width: 16.7003%; height: 18.4px;">mft</td>
<td style="width: 16.7003%; height: 18.4px;"><a href="https://blog.karstenhahn.de/admin/edit-content/google.de" target="_blank" rel="noopener">Test</a></td>
</tr>
</tbody>
</table>
<p>
<script type="text/javascript" src="https://blog.karstenhahn.de/bl-themes/andy/assets/js/tablefilter.js" defer="defer"></script>
</p>