Unable to get the TableTools to work...

TarponWebGuy

Hi Allan,
I'm currently using your DataTable plugin at version 1.9.0, which I love! However, I was trying to add the extra TableTools and I couldn't get the "Copy, CSV, Excel, PDF" buttons to work on any browser except for Google Chrome. Google Chrome will work occasionally, but not all the time... The print button works fine on all of my browsers. I used firebug (on firefox) and the error console (on Google) to see if there was any errors, and there were none. Below is the code I'm using to initiate the table:
[code]



google.load("jquery", "1.7.1");




jQuery.fn.dataTableExt.oSort['title-numeric-asc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {
$('#Example').dataTable({
"aaSorting": [[0,'desc'],[1,'desc']],
"aoColumns": [
null,
{ "sType": "title-numeric" },
null,
null
],
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "datatable/swf/copy_cvs_xls_pdf.swf"
},
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
});
});

[/code]

I've double checked to see if the "sSwfPath" is on the right path, and it is but no luck... Your TableTools examples work on all of my browsers, so I know it's an issue from my end. I'm not sure what else to do to fix the problem... I really need the CSV feature and I'm open to any suggestions. Please let me know if there is anything else I can do to fix the problem. Thank you for your time!

Steven

TarponWebGuy

Did I go over the edge? Please let me know if this wasn't clear...

TarponWebGuy

I figured it out... the problem was that I hide my page until it was loaded. My CSS was causing the issue:
[code]

.container {
display:none;
}

[/code]
I did some more digging to fix the issue and it looks like I would need to apply "fnResizeButtons". Is this the best way to go?

allan

Yes fnResizeButtons is the way to do it. Basically if you hide the container then there is now height / width for the elements inside it, so the Flash movies can't be placed on top of the buttons - thus they are 0x0 px. So when you show the container, the height and width become available and you can call fnResizeButtons to have TableTools place the buttons where they should be.

Allan

TarponWebGuy

Thanks Allan, although, I am a little lost... I am not using tabs (according to your example: http://datatables.net/extras/tabletools/api#fnResizeButtons), so can you show me how can I implement this "fnResizeButtons" method without screwing up everything else?

allan

You aren't using tab's but you are hiding the buttons which is the same effect. So just call fnResizeButtons after you make the container visible.

Allan

TarponWebGuy

I finally got it! My issue was that I didn't know that I needed to use the static method ("fnGetInstance") in order to use the instance "fnResizeButtons" method. Below is what I used once the page has loaded:
[code]
$(window).load(function () {
$.PadeLoaded();

$('div.container').fadeIn('slow');
var height = $('div.active_view').height(); // get the height after the content has been added
$('div.st_view').css('height', height+'px'); // set the new height on the content container

var TableTools1 = TableTools.fnGetInstance( 'Table' );
TableTools1.fnResizeButtons();
});
[/code]

Thanks again, Allan!