This example is designed to re-implement the visual effect of the DataTables row grouping example with a fixed column. It is alternative row grouping style to that presented in the row grouping by height example.
OSX.2+ | 1.8 | A |
OSX.3+ | 1.8 | A |
Gnome | 1.8 | A |
Win 98+ / OSX.2+ | 1.7 | A |
Win 98+ / OSX.2+ | 1.8 | A |
Win 98+ / OSX.2+ | 1.8 | A |
Win 2k+ / OSX.3+ | 1.9 | A |
Win 95+ / OSX.1+ | 1 | A |
Win 95+ / OSX.1+ | 1.1 | A |
Win 95+ / OSX.1+ | 1.2 | A |
Win 95+ / OSX.1+ | 1.3 | A |
Win 95+ / OSX.1+ | 1.4 | A |
Win 95+ / OSX.1+ | 1.5 | A |
Win 95+ / OSX.1+ | 1.6 | A |
Win 98+ / OSX.1+ | 1.7 | A |
Win 98+ / OSX.1+ | 1.8 | A |
Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
Win 98SE+ | 1.7 | A |
Win 98+ / OSX.2+ | 1.8 | A |
Win 98+ / OSX.2+ | 1.8 | A |
KDE 3.1 | 3.1 | C |
KDE 3.3 | 3.3 | A |
KDE 3.5 | 3.5 | A |
Embedded devices | - | X |
Windows Mobile 6 | - | C |
Text only | - | X |
Text only | - | X |
Embedded devices | - | C |
Embedded devices | - | A |
PSP | - | C |
- | - | U |
Nintendo DS | 8.5 | C/A |
N800 | - | A |
Win 95+ / OSX.1+ | - | A |
Win 95+ / OSX.2+ | - | A |
Win 95+ / OSX.2+ | - | A |
Win 95+ / OSX.2+ | - | A |
Win 95+ / OSX.3+ | - | A |
Win 88+ / OSX.3+ | - | A |
Win 88+ / OSX.3+ | - | A |
Wii | - | A |
Mac OS 8-9 | - | X |
Mac OS 7.6-9 | 1 | C |
Mac OS 8-X | 1 | C |
Win XP | 6 | A |
Win 95+ | 4 | X |
Win 95+ | 5 | C |
Win 95+ | 5.5 | A |
Win 98+ | 6 | A |
Win XP SP2+ | 7 | A |
iPod | 420.1 | A |
OSX.4+ | 420 | A |
S60 | 413 | A |
OSX.3 | 125.5 | A |
OSX.3 | 312.8 | A |
OSX.4+ | 419.3 | A |
OSX.4+ | 522.1 | A |
$(document).ready( function () { var oTable = $('#example').dataTable( { "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", "bScrollCollapse": true, "bPaginate": false, "aaSortingFixed": [ [1, 'asc'] ], "aoColumnDefs": [ { "bVisible": false, "aTargets": [1] } ] } ); new FixedColumns( oTable, { "fnDrawCallback": function ( left, right ) { var oSettings = oTable.fnSettings(); if ( oSettings.aiDisplay.length == 0 ) { return; } var nGroup, nCell, iIndex, sGroup; var sLastGroup = "", iCorrector=0; var nTrs = $('#example tbody tr'); var iColspan = nTrs[0].getElementsByTagName('td').length; for ( var i=0 ; i<nTrs.length ; i++ ) { iIndex = oSettings._iDisplayStart + i; sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1] ; if ( sGroup != sLastGroup ) { /* Cell to insert into main table */ nGroup = document.createElement( 'tr' ); nCell = document.createElement( 'td' ); nCell.colSpan = iColspan; nCell.className = "group"; nCell.innerHTML = " "; nGroup.appendChild( nCell ); nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] ); /* Cell to insert into the frozen columns */ nGroup = document.createElement( 'tr' ); nCell = document.createElement( 'td' ); nCell.className = "group"; nCell.innerHTML = sGroup; nGroup.appendChild( nCell ); $(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] ); iCorrector++; sLastGroup = sGroup; } } } } ); } );