Neuigkeiten, Interessantes und Informatives
Ergänzend zu der Möglichkeit via jQuery Tabelleninhalte zu sortieren, lassen sich auch Filter umsetzen. Ein entsprechendes Beispiel wurde von Jordi Gironés veröffentlicht. Hier ein Beispiel für die Nutzung:
HTML-Markup
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.jfilterselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table#tablefilter").tablesorter({
sortList: [[0,0],[1,0]],
widgets: ['jfilterselect','zebra']
});
});
</script>
</head>
<body>
<table class="tablesorter" id="tablefilter">
<caption>Headline</caption>
<thead>
<tr>
<th abbr="1">Spalte 1</th>
<th abbr="1">Spalte 2</th>
<th>Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
</body>
</html>
Dabei ist wichtig, dass die Tabelle einmal die CSS-Klasse “tablesorter” erhält. Somit ist die Grundfunktionalität der Sortierung gegeben. Zusätzlich erhalten die Tabellenzellen im Kopf noch ein Attribut (abbr=”1″) welches die Funktionalität des Filters für diese Spalte aktiviert. In diesem Beispiel sollen sich also die ersten beiden Spalten filtern lassen.
Zusammenfassend müssen also folgende Voraussetzungen erfüllt sein.
