TableTools - Exporting Buttons not working, Print Works. See Details Inside...

TableTools - Exporting Buttons not working, Print Works. See Details Inside...

phimuskapsiphimuskapsi Posts: 7Questions: 0Answers: 0
edited December 2012 in TableTools
So I've been crawling these boards and a bunch of blogs and even stackoverflow trying to find a solution to this issue.

I have TableTools in my DataTable. This is my Tables' init...
[code]
$("#resultTable").dataTable({
"bFilter": true,
"bJQueryUI": true,
"bPaginate": true,
"bProcessing": true,
"iDisplayLength" : 20,
"sAjaxSource": "scripts/PHP/responses/" + file,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "scripts/JS/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
},
"sPaginationType": "full_numbers",
"aoColumns": dtCols
});
var ttInstances = TableTools.fnGetMasters();
for (var j in ttInstances) {
ttInstances[j].fnResizeButtons();
}
[/code]

I'm using the normal CSS/JS files for TableTools/ZeroClipboard/DataTables.

The toolbar loads, but it's not quite in the right spot. Copying the init data of 'T<"clear">lfrtip' I would expect (like the sample) that this would go above the search bar, my toolbar is off to the right of the search bar. NONE of the buttons 'hover' EXCEPT for the Print button. All of the buttons are slightly overlapped when bJQueryUI is true, if I set this to false the buttons look perfect, but still have no use of any button but Print.

If I omit the sSwfPath it also loads just fine, but buttons do not work.

I cannot easily post a working example, however if this becomes critical I'll arrange something.

This is not a local 'file://' issue. This is not a flash error. There are no JS errors in my console. I have tried everything from setting the TableTools.DEFAULTS fixes, to fnResizeButtons(). Any assistance you can provide will be helpful. Thank you!

Other notes:
- This is loading from an ajax source
- The table lives in a dialog()
- Table has class of 'display'
- Have tried using JUI/themeroller CSS's. I have tried the latest TableTools and also TableTools that comes with DT.

Thanks!!

Replies

  • kishsharmakishsharma Posts: 5Questions: 0Answers: 0
    It must be the problem with "sSwfPath": please check it clearly.
  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin
    Agreed - sSwfPath the likely issue. Also please read this thread and link to a test case: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

    Allan
  • phimuskapsiphimuskapsi Posts: 7Questions: 0Answers: 0
    sSwfPath is not the issue.

    See here:
    SWF Loaded
    http://i10.photobucket.com/albums/a109/phimuskapsi/sSwfPath_zpsf128836d.png

    It is being loaded, it is being attached properly in the code. You can see this in the element dev area
    http://i10.photobucket.com/albums/a109/phimuskapsi/sSwfPath2_zps7221bb99.png

    I'm setting the path directly:
    "/scripts/JS/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"

    If I change the path to something else it doesn't load. Buttons appear but don't embed properly.
    Test case is very difficult as I'm on a password protected domain.
  • phimuskapsiphimuskapsi Posts: 7Questions: 0Answers: 0
    edited December 2012
    SOLVED! - Can a mod modify the title to reflect this fact?

    The problem is due to the fact that this is in a dialog and a variety of other windows the z-index for the div containing the embed was too low. It is initially set to 99 in TableTools_JUI.css (since I use jquery styling). I tried a variety of numbers, ended up finding one high enough to bubble it to the top. Now the click works.

    [code]
    .DTTT_button_copy div{
    z-index: 5000 !important;
    }

    .DTTT_button_csv div{
    z-index: 5001 !important;
    }

    .DTTT_button_xls div{
    z-index: 5002 !important;
    }

    .DTTT_button_pdf div{
    z-index: 5003 !important;
    }

    .DTTT_button_print div{
    z-index: 5004 !important;
    }
    [/code]

    Enjoy!
This discussion has been closed.