DataTables sorting plug-in example

# Preamble

When dealing with your own data formats, it can be desirable to define how you want sorting to occur. Using plug-in sorting functions, you have have DataTables sort data in any manner you wish. You tell DataTables how to sort a column by using the sType parameter - if it is not given then DataTables will attempt to automatically detect the type based on it's built in formatting functions.

This example shows sorting with a comma (',') for a decimal place. This sorting plug-in (and others can be found on DataTables.net.

# Live example

Rendering engine | Browser | Platform(s) | Engine version | CSS grade
--- | --- | --- | --- | ---
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C
Trident | Internet Explorer 5.5 | Win 95+ | 5,5 | A
Trident | Internet Explorer 6 | Win 98+ | 6 | A
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A
Trident | AOL browser (AOL desktop) | Win XP | 6 | A
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1,7 | A
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1,8 | A
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1,8 | A
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1,9 | A
Gecko | Camino 1.0 | OSX.2+ | 1,8 | A
Gecko | Camino 1.5 | OSX.3+ | 1,8 | A
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1,7 | A
Gecko | Netscape Browser 8 | Win 98SE+ | 1,7 | A
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1,8 | A
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1,1 | A
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1,2 | A
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1,3 | A
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1,4 | A
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1,5 | A
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1,6 | A
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1,7 | A
Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1,8 | A
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1,8 | A
Gecko | Epiphany 2.20 | Gnome | 1,8 | A
Webkit | Safari 1.2 | OSX.3 | 125,5 | A
Webkit | Safari 1.3 | OSX.3 | 312,8 | A
Webkit | Safari 2.0 | OSX.4+ | 419,3 | A
Webkit | Safari 3.0 | OSX.4+ | 522,1 | A
Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A
Webkit | iPod Touch / iPhone | iPod | 420,1 | A
Webkit | S60 | S60 | 413 | A
Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A
Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A
Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A
Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A
Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A
Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A
Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A
Presto | Opera for Wii | Wii | - | A
Presto | Nokia N800 | N800 | - | A
Presto | Nintendo DS browser | Nintendo DS | 8,5 | C/A1
KHTML | Konqureror 3.1 | KDE 3.1 | 3,1 | C
KHTML | Konqureror 3.3 | KDE 3.3 | 3,3 | A
KHTML | Konqureror 3.5 | KDE 3.5 | 3,5 | A
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C
Misc | NetFront 3.1 | Embedded devices | - | C
Misc | NetFront 3.4 | Embedded devices | - | A
Misc | Dillo 0.8 | Embedded devices | - | X
Misc | Links | Text only | - | X
Misc | Lynx | Text only | - | X
Misc | IE Mobile | Windows Mobile 6 | - | C
Misc | PSP browser | PSP | - | C
Other browsers | All others | - | - | U
Rendering engine | Browser | Platform(s) | Engine version | CSS grade

# Initialisation code

    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));
    };

    $(document).ready(function() {
    	$('#example').dataTable( {
    		"aoColumns": [
    			null,
    			null,
    			null,
    			{ "sType": "numeric-comma" },
    			null
    		]
    	} );
    } );

# Other examples

## Basic initialisation

- Zero configuration
- Feature enablement
- Sorting data
- Multi-column sorting
- Multiple tables
- Hidden columns
- Complex headers - grouping with colspan
- DOM positioning
- Flexible table width
- State saving
- Alternative pagination styles
- Scrolling:
  Horizontal / Vertical / Both / Themed / Infinite
- Change language information (internationalisation)
- ThemeRoller themes (Smoothness)

## Advanced initialisation

- Events:
  Live events / Pre-init / Post-init
- Column rendering
- Sorting without HTML tags
- Multiple table controls (sDom)
- Defining length menu options
- Complex headers and hidden columns
- Custom toolbar (element) around table
- Row highlighting with CSS
- Row grouping
- Row callback
- Footer callback
- Control sorting direction of columns
- Change language information from a file (internationalisation)
- Setting defaults
- State saving with localStorage
- Custom events

## API

- Dynamically add a new row
- Individual column filtering (using "input" elements)
- Individual column filtering (using "select" elements)
- Highlight rows and columns
- Show and hide details about a particular record
- User selectable rows (multiple rows)
- User selectable rows (single row) and delete rows
- Editable rows (with jEditable)
- Submit form with elements in table
- Index column (static number column)
- Show and hide columns dynamically
- API function use in initialisation object (callback)
- DataTables scrolling and tabs
- Regular expression filtering

## Data sources

- DOM
- Javascript array
- Ajax source
- Server side processing

## Server-side processing

- Obtain server-side data
- Add extra HTTP variables
- Use HTTP POST
- Automatic addition of IDs and classes to rows
- Reading table data from objects
- Show and hide details about a particular record
- User selectable rows (multiple rows)
- JSONP for a cross domain data source
- jEditable integration with DataTables
- Deferred loading of Ajax data
- Pipelining data (reduce Ajax calls for paging)

## Ajax data source

- Ajax sourced data (array of arrays)
- Ajax sourced data (array of objects)
- Deferred DOM creation for extra speed
- Empty data source columns
- Use a data source other than aaData (the default)
- Read column data from sub-arrays
- Read column data from deeply nested properties

## Plug-ins

- Add custom API functions
- Sorting and automatic type detection
- Sorting without automatic type detection
- Custom pagination controls
- Range filtering / custom filtering
- Live DOM sorting
- Automatic HTML type detection