When you want to detail with user selectable rows and DataTables, it is relatively simple when using DOM based data - but if using server-side processing, DataTables doesn't retain state over pages / filters etc, leaving this to the server-side instead. As such, you will need to keep a track of which rows a user as selected and mark them as selected on each draw. This is shown in this demo, which uses a unique ID in the first (and hidden) column.
Credit for this example belongs with forum member iuliandum. Thanks!
| ID | Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
|---|---|---|---|---|---|
| Loading data from server | |||||
| ID | Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
var oTable;
var gaiSelected = [];
$(document).ready(function() {
$('#form').submit( function() {
alert (gaiSelected);
return false;
} );
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_id.php",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"aoColumns": [
{ "bVisible": 0, "aTargets": [0] }
]
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$(this).toggleClass('row_selected');
} );
} );
Please refer to the DataTables documentation for full information about its API properties and methods.