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).
| 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.
DataTables
$(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)';
}
} );
} );