DataTables Extra Scroller

garrettwong

Whenever a user selects a different option, I am refreshing the Data Source property "aaData" and using "bDestroy": true. However, when the table is reconstructed, there is no table header (column names). Does anyone know how I can get this to work?

I'm using the below code (aoColumns is not working)
var oTable = $('#example').dataTable({
"aaData": source,
"bJQueryUI": true,
"aaSorting": [],
"aoColumns": [
{ "sTitle": "ID" },
{ "sTitle": "Test" },
{ "sTitle": "Type" },
{ "sTitle": "Request Date" }
],
"bDestroy": true,
"sScrollY": "380px",
"sDom": 'frtiS',
"bDeferRender": true,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('id', "row-" + aData[0]);
return nRow;
}
});
Thanks.

garrettwong

To add to this post, I tried running the code from the index.html file in the DataTables/Extras/Scroller again using Chrome's Console and the column headers didn't show up. The only parameter I added was "bDestroy". I guess this could be caused by something, but does anyone know a way to refresh the data rows with new data while maintaining the column headers?

// Called in Console
var oTable = $('#example').dataTable({
"aoColumns":["Request","Test","Name","Date","Success"],
"bDestroy":true,
"sScrollY": "380px",
"sAjaxSource": "data/2500.txt",
"sDom": "frtiS",
"bDeferRender": true,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('id', "row-" + aData[0]);
return nRow;
}
});

allan

Sounds like you might want this plug-in: http://datatables.net/plug-ins/api#fnReloadAjax ?

Allan