Ohne auf Server-seitige Programmierung wie etwa PHP zurückzugreifen, kann man mit dem jQuery Plugin Datatable einfach eine HTML Tabelle um zusätzliche Funktionen erweitern. Die Hauptfunktionen sind das sortieren nach den jeweiligen Spalten, Pagination (aufteilen in mehrere Seiten) und eine Suche.
Wer nur ein kleines sortier Skript sucht, der sei auf unseren Blog Beitrag zum jQuery Plugin
tableSorter verwiesen.
Verwendung von DataTables
Damit DataTables zuverlässig funktioniert, muss die HTML Tabelle sauber mit thead und tbody Elementen entworfen sein.
Tabellen Defintion:
<table border="0" cellspacing="0" cellpadding="0" class="" id="ID_table">
<thead>
<tr>
<th>Spieler</th>
<th>Rang</th>
<th>Punkte Gesamt</th>
<th>Punkte Durchschnitt</th>
<th>Punkte pro Spieler</th>
<th>Best</th>
<th>Siege</th>
<th>Spiele</th><th>Letztes Spiel</th>
</tr>
</thead>
<tbody>
<tr><td>Xanner</td><td>1</td><td>1941,00</td><td>970,00</td><td>141,50</td><td>980</td><td>1</td><td>2</td><td>30.04.2011</td></tr>
<tr><td>Rock</td><td>2</td><td>6229,00</td><td>889,00</td><td>154,14</td><td>1306</td><td>4</td><td>7</td><td>07.05.2011</td></tr>
<tr><td>Imp</td><td>3</td><td>4992,00</td><td>713,00</td><td>119,29</td><td>1046</td><td>1</td><td>7</td><td>07.05.2011</td></tr>
<tr><td>Phönix</td><td>4</td><td>2772,00</td><td>693,00</td><td>118,50</td><td>950</td><td>1</td><td>4</td><td>30.04.2011</td></tr>
<tr><td>LosSpackos</td><td>5</td><td>3325,00</td><td>665,00</td><td>102,20</td><td>981</td><td>0</td><td>5</td><td>07.05.2011</td></tr>
<tr><td>Granitor</td><td>6</td><td>1255,00</td><td>627,00</td><td>125,00</td><td>766</td><td>0</td><td>2</td><td>12.02.2011</td></tr>
<tr><td>Soof</td><td>7</td><td>2430,00</td><td>486,00</td><td>76,20</td><td>549</td><td>0</td><td>5</td><td>07.05.2011</td></tr>
<tr><td>Patko</td><td>8</td><td>2139,00</td><td>427,00</td><td>77,00</td><td>550</td><td>0</td><td>5</td><td>07.05.2011</td></tr>
<tr><td>Yoshi</td><td>9</td><td>1243,00</td><td>414,00</td><td>69,00</td><td>505</td><td>0</td><td>3</td><td>07.05.2011</td></tr>
<tr><td>Dana</td><td>10</td><td>228,00</td><td>228,00</td><td>28,00</td><td>228</td><td>0</td><td>1</td><td>30.04.2011</td></tr>
<tr><td>Sascha</td><td>11</td><td>134,00</td><td>134,00</td><td>16,00</td><td>134</td><td>0</td><td>1</td><td>30.04.2011</td></tr>
<tr><td>Pascale</td><td>12</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
<tr><td>Marco</td><td>13</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
<tr><td>Richy</td><td>14</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
<tr><td>Andy</td><td>15</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
<tr><td>Jessy</td><td>16</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
<tr><td>Rik</td><td>17</td><td>0,00</td><td>0,00</td><td>0</td><td>0</td><td>0</td><td>0</td><td>-</td></tr>
</tbody>
</table>
Darstellung der nackten Tabelle:
Spieler |
Rang |
Punkte Gesamt |
Punkte Durchschnitt |
Punkte pro Spieler |
Best |
Siege |
Spiele | Letztes Spiel |
Xanner | 1 | 1941,00 | 970,00 | 141,50 | 980 | 1 | 2 | 30.04.2011 |
Rock | 2 | 6229,00 | 889,00 | 154,14 | 1306 | 4 | 7 | 07.05.2011 |
Imp | 3 | 4992,00 | 713,00 | 119,29 | 1046 | 1 | 7 | 07.05.2011 |
Phönix | 4 | 2772,00 | 693,00 | 118,50 | 950 | 1 | 4 | 30.04.2011 |
LosSpackos | 5 | 3325,00 | 665,00 | 102,20 | 981 | 0 | 5 | 07.05.2011 |
Granitor | 6 | 1255,00 | 627,00 | 125,00 | 766 | 0 | 2 | 12.02.2011 |
Soof | 7 | 2430,00 | 486,00 | 76,20 | 549 | 0 | 5 | 07.05.2011 |
Patko | 8 | 2139,00 | 427,00 | 77,00 | 550 | 0 | 5 | 07.05.2011 |
Yoshi | 9 | 1243,00 | 414,00 | 69,00 | 505 | 0 | 3 | 07.05.2011 |
Dana | 10 | 228,00 | 228,00 | 28,00 | 228 | 0 | 1 | 30.04.2011 |
Sascha | 11 | 134,00 | 134,00 | 16,00 | 134 | 0 | 1 | 30.04.2011 |
Pascale | 12 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Marco | 13 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Richy | 14 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Andy | 15 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Jessy | 16 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Rik | 17 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Einbinden der DataTables Bibliothek:
<style type="text/css" title="currentStyle">
@import "<pfad_zu_datables>/DataTables/media/css/demo_page.css";
@import "<pfad_zu_datables>/DataTables/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="<pfad_zu_datables>/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="<pfad_zu_datables>/DataTables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#ID_table').dataTable({
"sPaginationType": "full_numbers", // Darstellungsvarianten 'two_button' oder 'full_numbers'
"oLanguage": {
"sUrl" : "<pfad_zu_DataTables>/DataTables/media/german.txt" // Deutsche Übersetzung (Muss extra angelegt / heruntergeladen werden)
},
"aaSorting": [[1,'asc']] // Spalte die Initial Sortierung übernimmt (hier: Rang)
});
});
</script>
Darstellung der selben Tabelle mit DataTables:
Spieler |
Rang |
Punkte Gesamt |
Punkte Durchschnitt |
Punkte pro Spieler |
Best |
Siege |
Spiele | Letztes Spiel |
Xanner | 1 | 1941,00 | 970,00 | 141,50 | 980 | 1 | 2 | 30.04.2011 |
Rock | 2 | 6229,00 | 889,00 | 154,14 | 1306 | 4 | 7 | 07.05.2011 |
Imp | 3 | 4992,00 | 713,00 | 119,29 | 1046 | 1 | 7 | 07.05.2011 |
Phönix | 4 | 2772,00 | 693,00 | 118,50 | 950 | 1 | 4 | 30.04.2011 |
LosSpackos | 5 | 3325,00 | 665,00 | 102,20 | 981 | 0 | 5 | 07.05.2011 |
Granitor | 6 | 1255,00 | 627,00 | 125,00 | 766 | 0 | 2 | 12.02.2011 |
Soof | 7 | 2430,00 | 486,00 | 76,20 | 549 | 0 | 5 | 07.05.2011 |
Patko | 8 | 2139,00 | 427,00 | 77,00 | 550 | 0 | 5 | 07.05.2011 |
Yoshi | 9 | 1243,00 | 414,00 | 69,00 | 505 | 0 | 3 | 07.05.2011 |
Dana | 10 | 228,00 | 228,00 | 28,00 | 228 | 0 | 1 | 30.04.2011 |
Sascha | 11 | 134,00 | 134,00 | 16,00 | 134 | 0 | 1 | 30.04.2011 |
Pascale | 12 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Marco | 13 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Richy | 14 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Andy | 15 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Jessy | 16 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Rik | 17 | 0,00 | 0,00 | 0 | 0 | 0 | 0 | - |
Übesetzung ins Deutsche
Die Übersetzung können entweder als JSON Datei per Ajax nachgeladen werden oder bei der Initialiserung mittels der "
oLanguage" Eigenschaft.
Deutsche und andere Übersetzungen sowie Hinweise findet man auf der
Plugin Seiten für Internationalisierung.
Styling von DataTables
Zum einen können die Demo Stylesheets übernommen werden bzw. entsprechend dem Seiten Layout angepasst werden.
Anderseits wird
ThemeRoller von jQuery UI unterstützt.
Weitere Infos finden sich auf der
Styling Seite von DataTables.
Sortier Problem mit Komma bei DataTables
Auch hier gibt es wieder Probleme beim Sortieren von Zahlen die Kommas anstelle von Punkten (amerikanisches System) als Nachkommastellen haben.
Zum Glück gibt es schon ein fertiges Plugin auf
http://www.datatables.net/examples/plug-ins/sorting_plugin.html.
jQuery.fn.dataTableExt.aTypes.unshift(
function ( sData )
{
var sValidChars = "0123456789-,";
var Char;
var bDecimal = false;
/* Check the numeric part */
for ( i=0 ; i<sData.length ; i++ )
{
Char = sData.charAt(i);
if (sValidChars.indexOf(Char) == -1)
{
return null;
}
/* Only allowed one decimal place... */
if ( Char == "," )
{
if ( bDecimal )
{
return null;
}
bDecimal = true;
}
}
return 'numeric-comma';
}
);
jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
Links
DataTables Homepage
DataTables Features - Features die in DataTables (de-) aktiviert werden können
DataTables Options
gt;lt;/tdtd2430,00td/tdtd/js/jquery/DataTables/media/german.txt
Kommentare
Nils
es wäre schön, wenn es auch noch ein Tutorial zur Sortierung der Datums-Einträge gäbe. Die werden nämlich, genau wie bei mir, NICHT korrekt sortiert. Ich verwende hier das, auf der Webseite http://www.datatables.net/plug-ins/sorting, angebote Plugin Date (dd/mm/YYY hh:ii:ss).
Initialisiere die Tabelle in custom.js mit:
$('#tabelle').dataTable({
"bPaginate": true,
"iDisplayLength": 100
});
Und in meiner Header steht folgendes:
source Date (dd/mm/YYY hh:ii:ss)
---> Sortierung aller Spalten klappt, nur beim Datum immer noch gleicher Fehler wie vorher. Irgendeine Idee?
Nick
vielleicht mache ich noch ein Tutorial zu den (Sortier) Plugins. Ich habe mir das dd/mm/yyyy Plugin eben angeschaut. Es funktioniert, es ist aber nicht sehr "Fehler" Tolerant. Enthalt die Spalte zum Beispiel "-" weil das Datum unbekannt ist, funktioniert das Sortieren nicht.
Weiterhin müssen Sie Ihre Tabellen Initialisation ergänzen. Sie müssen mittels "aoColumns" das Plugin zuweisen. Alle Spalten der Tabelle müssen in "aoColumns" definiert werden, für übernahme der Standard Werte nimmt man null. Das Beispiel hat 3x null, also hat die Tabelle 4 Spalten.
Beispiel:
$('#tabelle').dataTable({
"bPaginate": true,
"iDisplayLength": 100,
"aoColumns": [
null,
null,
null,
{"sType": "date-euro"} // Spalte mit Datum im Format: dd/mm/YYY hh:ii:ss
]
});
Weitere Infos zu aoColumns:
http://www.datatables.net/usage/columns
Ich hoffe, ich konnte damit schon mal auf die Schnelle helfen.
Grüsse,
Nick
Kommentar Verfassen