JavaScript - Datatables

Aus Wikizone
Wechseln zu: Navigation, Suche

Links[Bearbeiten]

http://datatables.net/


http://datatables.net/forums/discussion/8348/filtering-and-sorting/p1

"bJQueryUI": true

Snippets[Bearbeiten]

Standard Sortierung[Bearbeiten]

https://datatables.net/examples/basic_init/table_sorting.html

order option. Parameter 1 = Spalte, Parameter 2 "asc" oder "desc"

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

Deutsche Umlaute Sortieren[Bearbeiten]

JavaScript sortiert Deutsche Umlaute nicht richtig ein. Daher muß man mit Ersetzungen arbeiten.

http://www.brain4.de/programmierecke/js/arraySort.php

In Datatables kann man ein Plugin realisieren daß eine eigene Sortierroutine implementiert, die man dann wiederum setzen kann.

http://datatables.net/plug-ins/sorting und http://datatables.net/usage/columns#sType


	// Correction for datatables sorting routine
	(function() {
		
		function germanSort(a,b){
			a = a.replace(/<.*?>/g, ""); //exclude html tags
			a = a.toLowerCase();
			a = a.replace(/ä/g, "ae"); //replace german Umlauts
			a = a.replace(/ö/g, "ue");
			a = a.replace(/ü/g, "ue");
			a = a.replace(/ß/g, "ss");
			a = a.replace(/^der\s|^die\s|^das\s/i, ""); //exclude some german articles

			b = b.replace(/<.*?>/g, "");
			b = b.toLowerCase();
			b = b.replace(/ä/g, "ae");
			b = b.replace(/ö/g, "ue");
			b = b.replace(/ü/g, "ue");
			b = b.replace(/ß/g, "ss");
			b = b.replace(/^der\s|^die\s|^das\s/i, "");
		
			return (a == b) ? 0 : (a > b) ?  1 : -1;
		}
		jQuery.extend( jQuery.fn.dataTableExt.oSort, {
			"german-asc": function ( a, b ) {
				return germanSort(a,b);
			},
			
			"german-desc": function ( a, b ) {
		        return germanSort(a,b) * -1;
		    }
		} );
	}());

	
	// INIT DATATABLE
	$('#table_terms').dataTable({
		"aoColumns": [
            { "sType": "german" }, //custom sorting for first column
            null, //default sorting (automatic detection) for second
            null // s.o. 
        ],
         ... weitere Optionen
	});