Blog: Vorstellung des jQuery Plugin "DataTable" für HTML Tabellen sortieren, pagination und suchen

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

Do	01.12.2022	Kurs 4 Fortgeschrittener...	CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Do	01.12.2022	Kurs 3 Fortgeschrittener...	CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21
Do	01.12.2022	Kurs Basis 1 Lehrgang 2022	CompUser Club Mainspitze e.V.https://www.google.de/maps/place/Moselstraße+21,+65428+Rüsselsheim/@49.9909897,8.4162473,20z/data=!4m2!3m1!1s0x47bd99327b0f7cb9:0x7450272f33dc29e065428 RüsselsheimMoselstrasse 21

Nils	05.02.2012
Hallo, 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	06.02.2012
Hallo Nils, 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

Name (erforderlich)

E-Mail (erforderlich)
Ihre E-Mail Adresse wird nicht auf der Seite veröffentlicht. Sie dient ausschliesslich der möglichen Kontaktaufnahme unserseits.

Webseite (URL)

Ihr Text

3) Hinweis zur Freischaltung
Deutsch	Um Spam Missbrauch zu verhindern, werden alle Kommentare zuerst von uns geprüft. Daher kann es einen Augenblick dauern, bis Ihr Kommentar auf unserer Webseite erscheint. Spam oder was wir dafür halten, wird unsererseits kommentarlos gelöscht.
English	To avoid Spam on our Page, we check all Comments before publish. So save you and us Time and dont Spam.

Aktuelles

Der Verein

Archiv

Materialien

Aktivitäten

Vorstand

Web

Kontakt

Verwendung von DataTables

Tabellen Defintion:

Darstellung der nackten Tabelle:

Einbinden der DataTables Bibliothek:

Darstellung der selben Tabelle mit DataTables:

Übesetzung ins Deutsche

Styling von DataTables

Sortier Problem mit Komma bei DataTables

Links

Den Artikel empfehlen

Ähnliche Blog Beiträge

PHP Sicherheit: Wie wird PHP Code gehackt

HTML und CSS Coding Guidelines von Google

Das neue SelfHTML

HTML5: Deklaration der Webseiten Sprache (Meta Language)

Twitter API Teil 1: Wie stelle ich Tweets auf einer Webseite dar

HTML Tabellen (table) mit Javascript sortieren: Tablesorter für jQuery

Webentwickler: Erklärung, Aufdeckung und Behebung von Web Sicherheitslücken wie XSS oder SQL Injection

Dem Computer Club folgen und über Neuigkeiten informiert werden:

Kommentare

Nils

Nick

Kommentar Verfassen

3) Hinweis zur Freischaltung