DataTables example

DataTables footer callback example

# Preamble

DataTables using the header and footer callback manipulation functions (fnHeaderCallback() and fnFooterCallback()) you can perform some powerful and useful data manipulation. The example given below shows how a callback function can be used to total up visible (and hidden) data, taking into account all of DataTable's features (pagination, filtering etc).

# Live example

Rendering engine | Browser | Engine version | CSS grade | Market share (%)
--- | --- | --- | --- | ---
Trident | Internet Explorer 4.0 | 4 | X | 0.01
Trident | Internet Explorer 5.0 | 5 | C | 0.1
Trident | Internet Explorer 5.5 | 5.5 | A | 0.5
Trident | Internet Explorer 6 | 6 | A | 36
Trident | Internet Explorer 7 | 7 | A | 41
Trident | AOL browser (AOL desktop) | 6 | A | 1
Gecko | Firefox 1.0 | 1.7 | A | 0.1
Gecko | Firefox 1.5 | 1.8 | A | 0.5
Gecko | Firefox 2.0 | 1.8 | A | 7
Gecko | Firefox 3.0 | 1.9 | A | 9
Gecko | Camino 1.0 | 1.8 | A | 0.01
Gecko | Camino 1.5 | 1.8 | A | 0.01
Gecko | Netscape 7.2 | 1.7 | A | 0.01
Gecko | Netscape Browser 8 | 1.7 | A | 0.01
Gecko | Netscape Navigator 9 | 1.8 | A | 0.01
Gecko | Mozilla 1.0 | 1 | A | 0.01
Gecko | Mozilla 1.1 | 1.1 | A | 0.01
Gecko | Mozilla 1.2 | 1.2 | A | 0.01
Gecko | Mozilla 1.3 | 1.3 | A | 0.01
Gecko | Mozilla 1.4 | 1.4 | A | 0.01
Gecko | Mozilla 1.5 | 1.5 | A | 0.01
Gecko | Mozilla 1.6 | 1.6 | A | 0.01
Gecko | Mozilla 1.7 | 1.7 | A | 0.01
Gecko | Mozilla 1.8 | 1.8 | A | 0.01
Gecko | Seamonkey 1.1 | 1.8 | A | 0.01
Gecko | Epiphany 2.20 | 1.8 | A | 0.01
Webkit | Safari 1.2 | 125.5 | A | 0.01
Webkit | Safari 1.3 | 312.8 | A | 0.01
Webkit | Safari 2.0 | 419.3 | A | 1
Webkit | Safari 3.0 | 522.1 | A | 2.2
Webkit | OmniWeb 5.5 | 420 | A | 0.01
Webkit | iPod Touch / iPhone | 420.1 | A | 0.05
Webkit | S60 | 413 | A | 0.01
Presto | Opera 7.0 | - | A | 0.01
Presto | Opera 7.5 | - | A | 0.01
Presto | Opera 8.0 | - | A | 0.01
Presto | Opera 8.5 | - | A | 0.01
Presto | Opera 9.0 | - | A | 0.1
Presto | Opera 9.2 | - | A | 0.2
Presto | Opera 9.5 | - | A | 0.8
Presto | Opera for Wii | - | A | 0.01
Presto | Nokia N800 | - | A | 0.01
Presto | Nintendo DS browser | 8.5 | C/A1 | 0.01
KHTML | Konqureror 3.1 | 3.1 | C | 0.01
KHTML | Konqureror 3.3 | 3.3 | A | 0.01
KHTML | Konqureror 3.5 | 3.5 | A | 0.01
Tasman | Internet Explorer 4.5 | - | X | 0.01
Tasman | Internet Explorer 5.1 | 1 | C | 0.01
Tasman | Internet Explorer 5.2 | 1 | C | 0.01
Misc | NetFront 3.1 | - | C | 0.01
Misc | NetFront 3.4 | - | A | 0.01
Misc | Dillo 0.8 | - | X | 0.01
Misc | Links | - | X | 0.01
Misc | Lynx | - | X | 0.01
Misc | IE Mobile | - | C | 0.01
Misc | PSP browser | - | C | 0.01
Other browsers | All others | - | U | 0.04
Total: |

Warning! The market share information given in this table is fabricated using a combination of (mild) judgement, the BBC Browser Statistics information and statistics from TheCounter.com. THe lowest usage given to anyone browser is 0.01 for reasons of this example.

# Initialisation code

    $(document).ready(function() {
    	$('#example').dataTable( {
    		"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
    			/*
    			 * Calculate the total market share for all browsers in this table (ie inc. outside
    			 * the pagination)
    			 */
    			var iTotalMarket = 0;
    			for ( var i=0 ; i<aaData.length ; i++ )
    			{
    				iTotalMarket += aaData[i][4]*1;
    			}

    			/* Calculate the market share for browsers on this page */
    			var iPageMarket = 0;
    			for ( var i=iStart ; i<iEnd ; i++ )
    			{
    				iPageMarket += aaData[ aiDisplay[i] ][4]*1;
    			}

    			/* Modify the footer row to match what we want */
    			var nCells = nRow.getElementsByTagName('th');
    			nCells[1].innerHTML = parseInt(iPageMarket * 100)/100 +
    				'% ('+ parseInt(iTotalMarket * 100)/100 +'% total)';
    		}
    	} );
    } );

# 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