PDF formatting puts all table data on top of each other on left side. Any options to prevent this?

buildakicker

I am using Table Tools 2.1.4. I have successfully created a couple PDF file that have kept the table formatting, but it does not stay that way. It seems the table float left on top of each other in the generated PDF file.

I've tried to add a % to the and tags, but that doesn't seem to work consistently. I have tried the "bAutoWidth":false / true, with no effect.

I'm drawing a blank. Not sure why it isn't holding my simple table? I am generating this table by a for loop with php if that makes any difference.

Here is some relevant code:

[code]





$(document).ready( function () {
$('#resultstable').dataTable( {
"sDom": 'T<"clear">lfrtip',
"iDisplayLength": 100,
"oTableTools": {
"sSwfPath": "../lib/DataTables-1.9.4/media/swf/copy_csv_xls_pdf.swf"
},
"bFilter": false,
"bPaginate": false,
"bLengthChange": false,
"bAutoWidth":false
});
});

[/code]

This is my table:

[code]



Forest
Quantity
Amount



<?php
foreach($results as $key => $element){
echo "";
foreach($element as $subkey => $subelement){
echo "$subelement";
}
echo "";
}
?>


[/code]

buildakicker

Well, I found a funny reason... Not sure why this is a big deal, but I have .show() / .hide() on the div around the table so the data can be hidden on page load. If this div is hiden, and the PDF button is clicked, the table shows without any formatting and the text aligns left all on top of each other... however, if the table is shown, the pdf prints correctly... Not sure why that is, but that is the cause.

Any thoughts or ideas on keeping it hidden, but still printing correctly?

allan

The browser doesn't calculate height / width for an element and its children that is hidden - hence your issue here. One option might be to put your table into a div which has height and width of 1px + visibility:hidden. Bit hacky, but it should work if you want the table to be hidden.

Allan

buildakicker

@allan, thanks for the comment! Yes indeed that was the issue.

.hide() is display:none, so that explains it.

What I ended up doing is having the css hide (visibility:hidden) the table and make the surrounding div height="40px", then with jquery used my click to show make the surrounding div height="auto" and the table visibility:visible.

Looks fairly similar to what I was doing before and the PDF table data looks great.

Super script Allan! Thanks a bunch for your work.