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 |
var oTable; var giRedraw = false; $(document).ready(function() { /* Add a click handler to the rows - this could be used as a callback */ $("#example tbody").click(function(event) { $(oTable.fnSettings().aoData).each(function (){ $(this.nTr).removeClass('row_selected'); }); $(event.target.parentNode).addClass('row_selected'); }); /* Add a click handler for the delete row */ $('#delete').click( function() { var anSelected = fnGetSelected( oTable ); oTable.fnDeleteRow( anSelected[0] ); } ); /* Init the table */ oTable = $('#example').dataTable( ); } ); /* Get the rows which are currently selected */ 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.