Print as CSV and PDF not working

Martin@heco

Hey,

I want to implement a print function for the DataTables on my page. So I downloaded and included the TableTools and initialized them in the DataTables config. The config I'm using is the following:

var table = target.DataTable( {
    // Webservice data start
    "columns": xhrdata.columns,
    "data":    xhrdata.data,
    "order":   xhrdata.order,
    // Webservice data end

    "paging": false,
    "info": false,
    "bFilter": true,
    "dom": "tT",
    "ordering": true,
    "scrollY": "300px",
    "scrollCollapse": true,

    tableTools: {
        "sSwfPath": "/datatables/frontend/js/TableTools-2.2.3/swf/copy_csv_xls_pdf.swf"
    },

Path to SWF file is set correctly and the file is loaded. Ever JS file required as well. However, when I click the link for saving a file as PDF or CSV, nothing happens. What am I missing, where did I get the config wrong...?
A test page of the behaviour described above can be found at http://dev.heco.de/en/edelstahl/flanges/welding-neck-flanges/din-en/pn-16/iso.html the table is shown after clicking on "stocks and pricing".

Regards,
Martin

Grigore

I had the same problem and the error was the "path to SWF". I can't find stocks and pricing to check ... can you provide a better link ?

Thanks

Martin@heco

I'm sorry for the broken link, the comma at the end was included unintentionally. I edited the opening post, so feel free to check the link again...!

The page should now load correctly, and the stocks and pricing tab should be visible.

Grigore

Try to add the full path and check.

Change :
"sSwfPath": "/datatables/frontend/js/TableTools-2.2.3/swf/copy_csv_xls_pdf.swf"

to

"sSwfPath": "http://dev.heco.de/datatables/frontend/js/TableTools-2.2.3/swf/copy_csv_xls_pdf.swf",

And see.

Martin@heco

Hey Grigore,

thx for the answer, but loading the swf file is not the problem. Neither do I receive a 404 nor does referencing the file via cdn change anything. Developer Tools tell me the file is loaded correctly, so this does not seem to be the answer...

Thx anyway,
Martin

Martin@heco

Okay, after debugging a little further I found that the problem is that table is initialized hidden. Therefore the embed element is initialized with width and height set to 0. Plus, it's not rendered to position of the link, but to the table head. If I edit the html source and set a clickable width and height, I get the functionality to work correctly.
I can get the corresponding elements to get valid dimensions by firing oTableTools.fnResizeButtons() manually, but they're still rendered at the incorrect position.
The embed-tag can be found by inspection one of the TableTool links at the bottom of the table with Developer Tools, and then openening the corresponding HTML node.
An updated version of the testpage can be found here, after clicking on "stocks and pricing": http://dev.heco.de/en/edelstahl/flanges/welding-neck-flanges/din-en/pn-16/iso.html

So the question remains: How can I initialize TableTools correctly to get a clickable functionality for the links...?

Regards, Martin

allan

Hi Martin,

It looks like you need to include the TableTools CSS on your page. Could you possibly do so please?

Thanks,
Allan

Martin@heco

rookie mistake: loaded the css-files as javascript... well, that's fixed now, and I got the buttons, but the flash-object still has a height and width of 0 and is not clickable.

If you search for the id "ZeroClipboard_TableToolsMovie_3", you can see the problem.

Any more hints? Thanks in advance for your help!