dataTable TableTools Copy button not working

Question

First off here is the development site im working on. This is currently in development so things may change before you even answer: http://wgarrisondev.mainstreethost.com/mage-product-redirects/public/

Here is my initialization code:

// DataTable editor plugin initialization    
var editor = new $.fn.dataTable.Editor( {
    ajax: function ( method, url, data, successCallback, errorCallback ) {
        successCallback( {"id": 4} );
    },
    table: "#grid-basic",
    dom: 'Tlfrtip',
    fields: [ {
            label: "Request URL:",
            name: "request-url"
        }, {
            label: "Target URL:",
            name: "target-url"
        }, {
            label: "Category:",
            name: "category"
        }
    ]
});
// DataTable Initialization
var dataTable = $('#grid-basic').DataTable({                
    responsive: true,
    columns: [
        { data: "request-url" },
        { data: "target-url" },
        { data: "category" },
        { data: null, defaultContent: '<button type="button" class="btn btn-xs btn-danger icon-delete"><span class="glyphicon glyphicon-remove"></span></button>', orderable: false }
    ]
});

// TableTools DataTable plugin initialization
var tableTools = new $.fn.dataTable.TableTools(dataTable, {
    "sSwfPath": swfPath,
    "aButtons": [
        "copy",
        {
            "sExtends": "collection",
            "sButtonText": "Export",
            "aButtons": ["csv", "xls", "pdf"]
        }
    ]
});
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

// Set up editing of fields
$('#grid-basic').on( 'click', 'tbody td:not(:last-child)', function () {
    editor.inline( this );
} );

// Set up Removal functionality
$('#grid-basic').on('click', 'button.icon-delete', function() {
    dataTable.row($(this).parents('tr')).remove().draw();
});   

I am having some really weird behavior. The Copy button doesn't work. However, if I choose one of the other three options and THEN click on copy it works fine. All other options work fine.

Update -
I have determined that any button i don't put in a collection wont work until I have clicked on the collection at least once.....still clueless

Update 2 - So I have made some progress. My application first requires that you select a store type and a domain. At this point the table I am using is hidden with a simple inline style="display: none". After generating the url's jquery then shows the table with all of its fields. If I don't hide my table in the beginning then the export buttons all work fine. However, something about having the table hidden initially screws things up. Obviously I can't have my table hidden the entire time so I am still trying to figure out why this happens. This stack overflow had a lesser rated answer that pointed me in the right direction.

Answer 1

So as I stated in update 2 the issue is that if the buttons are added to the table while its hidden (im using bootstrap but it happens whether using hidden class or style none), when its shown the buttons don't want to work. Something about the container class was "fixing" this issue which is why the copy would work after it was clicked.

I still don't know why this is happening but this is how I fixed it. I now add in the buttons AFTER I show the table like this:

$('#grid-container').show(400); $( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

This means they don't fall victim of the transitions and work just fine.