(yet another) table tools button not working problem

rebeccamarye

My PoC site is here: http://calfteqpoc.azurewebsites.net/Breeds

Nothing is hidden on load, and the swf file is being loaded, which seem to be the most common problems with the TableTools export buttons. And yet...nothing but print works.

The DataTable.init function is in table-advanced.js, but the pertinent sections are:

           "dom": "<'row' <'col m12'T>><'table-scrollable't><'row'<'col m5 s12'i><'col m7 s12'p>>",

           "tableTools": {
            "sSwfPath": "/Plugins/DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            "sRowSelect" : "single",
            "aButtons": [{
                "sExtends": "pdf",
                "sButtonText": "PDF"
            }, {
                "sExtends": "csv",
                "sButtonText": "CSV"
            }, {
                "sExtends": "xls",
                "sButtonText": "Excel"
            }, {
                "sExtends": "print",
                "sButtonText": "Print",
                "sInfo": 'Please press "CTR+P" to print or "ESC" to quit',
                "sMessage": "Generated by DataTables"
            }]

The page-specific code in document ready is:

        var oTable = $('#basicTable').DataTable();
        if (oTable != null) {
            oTable.columns('.hideMe').visible(false, true);

            $('#createButton').on("click", createRow);
            $("#editButton").on("click", editRow);
            $('#deleteButton').on("click", deleteRow);
            oTable.on('click', 'tr', function () {
                $(this).toggleClass('selected');
            }); 
        }

I thought perhaps that it might be an issue with moving the table tools buttons in the css, so I've removed that code (float right and a negative margin).

I've been struggling with this for two days. I'll be SOOO grateful to whoever can point me in the direction of what stupid thing I'm doing here.

allan

Hi,

Thanks for the test case! So the issue here is that the CSS for the buttons isn't quite complete. I see you have some custom CSS rather than TableTools defaults - that is absolutely fine and very much to be encouraged(!), but there is one point that the Flash buttons absolutely require in order to be able to function - the buttons needs to be position: relative;.

The following CSS will allow them to work:

div.dataTables_wrapper a.btn {
  position: relative;
}

Now the reason for this is that the Flash objects are embedded using position: absolute so they can cover the HTML buttons. position: absolute is based on the offset parent, so we need to make the button that offset parent, otherwise the Flash elements all end up grouped together where they are of no use to anyone!

Regards,
Allan

rebeccamarye

Worked a charm, and you're officially a hero. Thanks! (Go tell your boss Rebecca said you could have the rest of the day off ;) )