It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the fnRowCallback() function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function fnGetSelected() for later processing.
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
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 |
$(document).ready(function() { /* Add a click handler to the rows - this could be used as a callback */ $('#example tr').click( function() { if ( $(this).hasClass('row_selected') ) $(this).removeClass('row_selected'); else $(this).addClass('row_selected'); } ); /* Init the table */ var oTable = $('#example').dataTable( ); } ); /* * I don't actually use this here, but it is provided as it might be useful and demonstrates * getting the TR nodes from DataTables */ function fnGetSelected( oTableLocal ) { var aReturn = new Array(); var aTrs = oTableLocal.fnGetNodes(); for ( var i=0 ; i<aTrs.length ; i++ ) { if ( $(aTrs[i]).hasClass('row_selected') ) { aReturn.push( aTrs[i] ); } } return aReturn; }
Please refer to the DataTables documentation for full information about its API properties and methods.