Data Tables - Scroller Missing Column Headers on Refresh

Question

I'm using the new Data Tables extra plugin - Scroller.

However, I am having trouble when refreshing the existing Data Table Grid with a new data source array from an ajax request. (Code below).

The first time I run this exact code on the page, it works properly. However, whenever I call this code snippet again given a different source, the data table is re-rendered but is missing all column headers. Does anyone know why the Columns are disappearing every subsequent time after the first?

oTable = $('#example').dataTable({
                                "aoColumns": [
                                    { "sTitle": "ID" },
                                    { "sTitle": "Test" },
                                    { "sTitle": "Type" },
                                    { "sTitle": "Date" },
                                    { "sTitle": "Revision" }
                                ],
                                "aaData": source,
                                "bDestroy":true,
                                "sScrollY": "380px",
                                "sDom": 'frtiS',
                                "bDeferRender": true,
                                "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                    $(nRow).attr('id', "row-" + aData[0]);
                                    return nRow;
                                }
                            });

Answer 1

I have also had the same problem and here is the answer from Allan and it worked perfectly in my case. http://www.datatables.net/forums/discussion/14278/scroller-plugin-misplaces-datatables-column-header#Item_1