CUCM Logo
Sa  11.04.2020CompUser 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  30.04.2020CompUser 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  30.04.2020CompUser 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
Admin 
 

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

Autor: Nick   Kommentare (2)   Kurz URL: http://bit.ly/lj262G   Bei Twitter speichern   Bei Facebook speichern   Bei Digg speichern   Bei Delicious speichern   Bei Mr. Wong speichern   Bei Google Bookmarks speichern
13.05.2011
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 SpieleLetztes Spiel
Xanner11941,00970,00141,509801230.04.2011
Rock26229,00889,00154,1413064707.05.2011
Imp34992,00713,00119,2910461707.05.2011
Phönix42772,00693,00118,509501430.04.2011
LosSpackos53325,00665,00102,209810507.05.2011
Granitor61255,00627,00125,007660212.02.2011
Soof72430,00486,0076,205490507.05.2011
Patko82139,00427,0077,005500507.05.2011
Yoshi91243,00414,0069,005050307.05.2011
Dana10228,00228,0028,002280130.04.2011
Sascha11134,00134,0016,001340130.04.2011
Pascale120,000,000000-
Marco130,000,000000-
Richy140,000,000000-
Andy150,000,000000-
Jessy160,000,000000-
Rik170,000,000000-


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 SpieleLetztes Spiel
Xanner11941,00970,00141,509801230.04.2011
Rock26229,00889,00154,1413064707.05.2011
Imp34992,00713,00119,2910461707.05.2011
Phönix42772,00693,00118,509501430.04.2011
LosSpackos53325,00665,00102,209810507.05.2011
Granitor61255,00627,00125,007660212.02.2011
Soof72430,00486,0076,205490507.05.2011
Patko82139,00427,0077,005500507.05.2011
Yoshi91243,00414,0069,005050307.05.2011
Dana10228,00228,0028,002280130.04.2011
Sascha11134,00134,0016,001340130.04.2011
Pascale120,000,000000-
Marco130,000,000000-
Richy140,000,000000-
Andy150,000,000000-
Jessy160,000,000000-
Rik170,000,000000-


Ü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


Den Artikel empfehlen

Ähnliche Blog Beiträge

PHP Sicherheit: Wie wird PHP Code gehackt

http://www.cucm.de/blog/115/php_sicherheit_wie_wird_php_code_gehackt/
24.07.2012 - Quasi kein Tag vergeht, ohne das über Webseiten Einbrüche und gestohlene Daten berichtet wird. Die Methoden der Hacker sind stehts gleich und bereits mit wenigen Massnahmen ausser Gefecht gesetzt.  Weiter lesen

HTML und CSS Coding Guidelines von Google

http://www.cucm.de/blog/98/html_und_css_coding_guidelines_von_google/
06.05.2012 - Google hat seinen Leitfaden für einheitlichen und sauberen HTML / CSS Code veröffentlicht. Damit einigt man sich bei einem Projekt auf ein paar Regeln, z.B. wie wird Quellcode formatiert, Namenskonventionen, wo werden welche Dateien abgelegt etc.  Weiter lesen

Das neue SelfHTML

http://www.cucm.de/blog/96/das_neue_selfhtml/
18.04.2012 - Ein neues Projekt vom Self HTML Autor Stefan Münz  Weiter lesen

HTML5: Deklaration der Webseiten Sprache (Meta Language)

http://www.cucm.de/blog/84/html5_deklaration_der_webseiten_sprache_meta_language/
07.01.2012 -  Weiter lesen

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

http://www.cucm.de/blog/40/twitter_api_teil_1_wie_stelle_ich_tweets_auf_einer_webseite_dar/
14.10.2010 -  Weiter lesen

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

http://www.cucm.de/blog/35/html_tabellen_table_mit_javascript_sortieren_tablesorter_fuer_jquery/
29.06.2010 - Mittels dem jQuery Plugin Tablesorter wandeln sich HTML Tabellen in sortierbare Tabellen. Eine serverseitige Programmiersprache wie PHP wird dabei nicht benötigt.  Weiter lesen

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

http://www.cucm.de/blog/31/webentwickler_erklaerung_aufdeckung_und_behebung_von_web_sicherheitsluecken_wie_xss_oder_sql_injection/
18.06.2010 -  Weiter lesen

Weitere Blog Artikel vom Compuser Club

Dem Computer Club folgen und über Neuigkeiten informiert werden:

RSS Feeds RSS Feeds   CUCM @ Twitter Twitter   CUCM @ Facebook Facebook   CUCM @ Google+ Google+
 

Kommentare

 

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´Zur Webseite

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
 
 

Kommentar Verfassen

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

3) Hinweis zur Freischaltung
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.
To avoid Spam on our Page, we check all Comments before publish. So save you and us Time and dont Spam.


CompUser Club Mainspitze e.V.   |  65428 Rüsselsheim   |  Moselstrasse 21 (Post Gebäude: 1. Stock)