Kennt ihr schon das jQuery Plugin DataTables ? Ein sehr flexibles Werkzeug, mit dessen Hilfe ihr zu jeder beliebigen HTML-Tabelle interaktive Steuerungselemente ergänzen könnt. Nein, dann lasst es mich euch vorstellen.
Mit DataTables könnt ihr eure HTML-Tabellen sehr einfach um ein Paging, eine Sortierung pro Spalte oder auch eine Suche erweitern. Es spielt dabei keine Rolle, ob eure Tabelle fest in eurem HTML-Dokument vorliegt, oder ob ihr neben dem Grundgerüst für eure Tabelle die Daten z.B. nur als ein JSON-Objekt innerhalb des HTML-Dokuments oder einer externen Datei vorliegen habt. Auch bietet das Plugin die Unterstützung, die Daten für die Tabelle mittles Ajax laden zu lassen. Um das Plugin nutzen zu können, müsst ihr neben jQuery nur noch die Dateien des Plugins auf euren Seiten einbinden.
http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
Anschließend könnt ihr eine einfache Variante einer Tabelle, wie im folgenden Beispiel anlegen, um darin eure Daten darstellen zu lassen:
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Für mein Beispiel liegen die Daten für die Tabelle im Javascript vor, was in etwa wie folgt aussieht
<script>
var dataSet = [
[ "Row 1 Value 1", "Row 1 Value 2", "Row 1 Value 3", "Row 1 Value 4" ],
[ "Row 2 Value 1", "Row 2 Value 2", "Row 2 Value 3", "Row 2 Value 4" ],
[ "Row 3 Value 1", "Row 3 Value 2", "Row 3 Value 3", "Row 3 Value 4" ],
[ "Row 4 Value 1", "Row 4 Value 2", "Row 4 Value 3", "Row 4 Value 4" ]
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet
} );
} );
</script>Wie ihr seht, ist es nicht schwer die Daten bereitzustellen, um die Vorteile des Plugins nutzen zu können. Wer Lust oder größere Anforderungen hat, kann sich ja mal den Spass machen und seine Daten per Ajax nachladen. Hierbei hat man auch die Freiheit, die Daten vor der Darstellung manipulieren zu können, um z.B. einen Link ein eine Spalte einzubauen.
Probiert es einfach mal aus und entdeckt die umfangreichen Möglichkeiten, die DataTables euch bieten.