buttons.resize - can't get hidden button 'Copy' functionality to work...

Scoobysnack

I'm in the process of moving from TableTools to Buttons. You can see TableTools working by going to http://dmdd.org.uk/search - enter 'abnormal' and accept the first autocomplete suggestion, then click search (phenotype search - the default tab). On the results page you can see the TableTools buttons for Copy and CSV. I've successfully converted this page to Buttons.

The next example (which I'm having a problem with) is http://dmdd.org.uk/details/DMDD5192 - there are two tables on this page: one at the top of the page (shown on page load) and the other at the foot of the page, hidden initially within the collapsed accordion. I've added the functions to resize the buttons when the accordion tabs are clicked, or when the expand all button is clicked, which you can see if you view the source (line 1787 onwards).

Converting this page to Buttons, I'm able to get the Buttons to appear, and the Copy button works fine on the first table on the page, but not on the second. Below is the revised code:

'''js
$(document).ready(function() {

var tableEA = $ ('.embryoAnnotations').DataTable ({
"paging":   false,
     "info":     false,
     "searching": false,
     "ordering": false     
 });

if ($.fn.dataTable.isDataTable('.embryoAnnotations')) {

        new $.fn.dataTable.Buttons ( tableEA, {
            buttons: ["copy", "csv"]                        
    });
    tableEA.buttons().container().prependTo('.embryoPanel');
    };


var tableED = $('.embryoDetails').DataTable({ 
"paging":   false,
     "info":     false,
     "searching": false,
     "ordering": false     
 });

 new $.fn.dataTable.Buttons ( tableED, {
        buttons: ["copy", "csv"]                        
});

tableED.buttons().container().prependTo('#info');

$('#expand').click(function() {

        $.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();

});

$('.accordion').on('toggled', function (event, accordion) {

        $.fn.dataTable.tables( { visible: true, api: true } ).buttons.resize();

});

});
'''

I tried creating a Fiddle (http://jsfiddle.net/Scoobysnack/9n338bw4/4/), but can't even get DataTables functionality to work :( (Using Foundation - so I'd need to add Foundation, and the rest of the page html for a complete example on Fiddle). Hoping it's something blindingly obvious(?)

Any advice/pointers welcomed! :)

Scoobysnack

This is the TableTools code that I'm changing from (which works fine):

'''

jQuery('#expand').click(function() {
    var ttInstances = TableTools.fnGetMasters();

    for (i in ttInstances) {
    if (ttInstances[i].fnResizeRequired()) 
    ttInstances[i].fnResizeButtons();
    }       
});

jQuery('.accordion').on('toggled', function (event, accordion) {

    var ttInstances = TableTools.fnGetMasters();

    for (i in ttInstances) {
    if (ttInstances[i].fnResizeRequired()) 
    ttInstances[i].fnResizeButtons();
    }

});

var tableEA = jQuery ('.embryoAnnotations').DataTable ({
    "paging": false,
    "info": false,
    "searching": false,
    "scrollY": "300px",
    "scrollCollapse": true
});


// check annotations table exists for this embryo   
if ( jQuery.fn.dataTable.isDataTable( '.embryoAnnotations' ) ) {
    // create TableTools buttons    
    var tableToolsEA = new jQuery.fn.dataTable.TableTools ( tableEA, {
        "aButtons": ["copy", "csv"],
        sSwfPath: "//cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls.swf"                      
    });
    // move buttons in the DOM
    jQuery(tableToolsEA.fnContainer() ).prependTo('.embryoPanel');
}


var tableED = jQuery('.embryoDetails').DataTable({
    "paging":   false,
    "info":     false,
    "searching": false,
    "ordering": false 
    });
    var tableToolsED = new jQuery.fn.dataTable.TableTools ( tableED, {
            "aButtons": ["copy", "csv"],
            sSwfPath: "//cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls.swf"                      
    });

 jQuery(tableToolsED.fnContainer() ).prependTo('#info');    

'''

Scoobysnack

I think the reason this isn't working is because more than one table is becoming visible at the same time (ie this might work on tabs, with one table per tab, but not on accordion where all tables become visible at the same time)...(sorry, my javascript is poor :|

Scoobysnack

Forgot the actual error: TypeError: jQuery.fn.dataTable.tables(...).buttons is undefined (after clicking on the 'Expand all' button).