TableTools export not working in DataTables on multiple JQuery tabs

Question

I am using DataTables-1.8.2, TableTools-2.0.1 and JQuery-1.6.4 to display a table on each of three jQuery tabs. TableTools provides the Copy/Excel/PDF/Print export features for the table and it works great on the first table on the first tab only. On the other two tabs, the buttons are displayed, but none of them do anything except the Print button (this is because the Print button does not use the same Flash-based method). Paths should not be an issue (I know the .swf path is a common problem) because the configuration of the one that works was just copied for the others. This is running on a Django server. Below is the code. I write in Python mostly, so I am not very facile with JS/CSS/DOM, so any suggestions are appreciated.

<script type="text/javascript">
$(document).ready(function()
{
    // Initiate datatable
    fnFeaturesInit();
    $('#tbl1').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" } 
        });

    $('#tbl2').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
        });

    $('#tbl3').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": 'T<"clear">lfrtip',
        "aaSorting":[],
        "oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
        });
}
</script>

(...snip...)

    <div id="tabs" class="ui-tabs" style="float:left">
        <ul>
            <li><a href="#tabs-1">Table 1</a></li>
            <li><a href="#tabs-2">Table 2</a></li>
            <li><a href="#tabs-3">Table 3</a></li>
        </ul>
        <div id="tabs-1" height:"100%">  
        {% if all_commercial %} 
      <div class="dataTables_wrapper" id="example_wrapper">
         <div style="position: relative;" class="DTTT_container">
             <div class="clear"></div>
                 <table id="tbl1" class="display" >
                 #(...snip...)
                 </table>
             </div>
         </div>
        {% else %} 
           <p>No data are available.</p>
        {% endif %}
        </div> 
        <div id="tabs-2" height:"100%">  
        {% if all_commercial %} 
           <div class="dataTables_wrapper" id="example_wrapper2">
              <div style="position: relative;" class="DTTT_container">
                  <div class="clear"></div>
                <table id="tbl2" class="display" >
                #(...snip...)
                    </table>
                  </div>
              </div>
         {% else %} 
            <p>No data are available.</p>
         {% endif %}
         </div>
   # etc for third table

Answer 1

Table must be visible during the initialization.

If not, just call fnResizeButtons on display like that (2 options):

    $("#tabs").tabs({
                activate : function(event, ui)
                {
                    // Version 1.
                    $('table', ui.panel).each(function()
                    {
                        var oTableTools = TableTools.fnGetInstance(this);

                        if (oTableTools && oTableTools.fnResizeRequired())
                        {
                            oTableTools.fnResizeButtons();
                        }
                    });

                    // or version 2.
                    var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

                    while (instances--)
                    {
                        var dataTable = tableInstances[instances];
                        if (dataTable.fnResizeRequired())
                        {
                            dataTable.fnResizeButtons();
                        }
                    }
                }
            });

Answer 2

Alexandre Mathieu provided a solution in his blog: http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

This worked for me (jquery 1.8):

$("#tabs").tabs({
    show: function(ui, event) {
        ttInstances = TableTools.fnGetMasters();
        for (i in ttInstances) {
            if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
        }
    }
});

In jquery 1.9+:

$("#tabs").tabs({
    activate: function(event, ui) {
        ttInstances = TableTools.fnGetMasters();
        for (i in ttInstances) {
            if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
        }
    }
});

Answer 3

You could try this code:

$(document).ready( function () {

    TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls", "pdf" ];
    TableTools.DEFAULTS.sSwfPath = "/static/swf/copy_cvs_xls_pdf.swf";

     $('#tbl1').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "sDom": 'T<"clear">lfrtip',
            "aaSorting":[],
            });
    .
    .
    .

});

Answer 4

@* Load datatable js *@ @section Scripts{

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.tableTools.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="~/Scripts/DataTables/buttons.flash.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.min.js"></script>

<script src="~/Scripts/DataTables/jszip.min.js"></script>
<script src="~/Scripts/DataTables/pdfmake.min.js"></script>
<script src="~/Scripts/DataTables/vfs_fonts.js"></script>

<script>
    $('#tabs').tabs({
        activate: function (event, ui) {
            $.fn.dataTable.tables({ visible: true, api: true }).buttons.resize();
        }
    });
    $(document).ready(
        function () {
            $('#myTable').DataTable({
                dom: 'Bfrtip',
                responsive: true,

                buttons: [
                        'copyFlash',
                        'excelFlash',
                        'csvFlash',
                        'pdfFlash'],

                //'copyHtml5',
                //'excelHtml5',
                //'csvHtml5',
                //'pdfHtml5'],
                "ajax": {
                    "url": "/home/AjaxHandler",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true },
                    { "data": "DateOfBirth", "autoWidth": true },
                    { "data": "Address", "autoWidth": true }
                ]
            });

            $('#myTable1').DataTable({
                dom: 'Bfrtip',
                buttons: [
                        'copyFlash',
                        'excelFlash',
                        'csvFlash',
                        'pdfFlash'],

                //'copyHtml5',
                //'excelHtml5',
                //'csvHtml5',
                //'pdfHtml5'],
                "ajax": {
                    "url": "/home/AjaxHandler1",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true }
                ]
            });
        });
</script>

}