DataTables example

DataTables dynamic creation example

# Preamble

At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.

# Live example

# Initialisation code

    $(document).ready(function() {
    	$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
    	$('#example').dataTable( {
    		"aaData": [
    			/* Reduced data set */
    			[ "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.0", "Win 98+", 6, "A" ],
    			[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
    			[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
    			[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
    			[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "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" ]
    		],
    		"aoColumns": [
    			{ "sTitle": "Engine" },
    			{ "sTitle": "Browser" },
    			{ "sTitle": "Platform" },
    			{ "sTitle": "Version", "sClass": "center" },
    			{
    				"sTitle": "Grade",
    				"sClass": "center",
    				"fnRender": function(obj) {
    					var sReturn = obj.aData[ obj.iDataColumn ];
    					if ( sReturn == "A" ) {
    						sReturn = "<b>A</b>";
    					}
    					return sReturn;
    				}
    			}
    		]
    	} );
    } );

# 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