Table Header Redraw Issue - Only Header Impacted

mmikuta

Working as a novice with Data Tables and have run into an issue. Have table that inits fine and displays fine on the first pass, however subsequently re-displaying the table the table headers draw with 0 PX widths (checked with FireFox Inspector) causing all the headers to be shifted to the left out of position. The table is being revealed via the JQuery slideDown approach. The table itself is loaded from a file using the JQuery .load( ) approach and is placed into a div that is set to display with 0 px height. In order for the slideDown approach to run the display value is changed to none after the table is "initComplete:", then slideDown is called. The approach works triggered from a button on the interface. However the only the table headers fail to align properly after the div is hidden via the slideUp function and the process is run again. When slideUp is called the entire setup is re-init'd to the starting point that works from the first pass. I have checked the mentioned item on http://datatables.net/examples/api/tabs_and_scrolling.html and am working with the .columns.adjust(); method however no error is received and the table continues to re-draw incorrectly. I don't believe I am calling the method in the correct manner. See below, please help in you can.

function formatTable(targetTableID, classToShow) { $(targetTableID).dataTable( { "destroy": true, "paging": false, "info": false, "scrollY": "160px", "jQueryUI": true, "initComplete": function (settings, json) { var api = this.api(); api.columns.adjust(); classToShow.className = 'tableContentShow'; $('#infoPane02').slideDown(); } } ); }