TableTools導出無法在多個JQuery選項卡上的DataTable中工作

Question

我正在使用DataTables-1.8.2，TableTools-2.0.1和JQuery-1.6.4在三個jQuery選項卡上顯示一個表。 TableTools爲表格提供了複製/ Excel/PDF /打印導出功能，並且它僅適用於第一個選項卡上的第一個表格。在另外兩個選項卡上，顯示按鈕，但除了「打印」按鈕外，其他按鈕都沒有任何操作（這是因爲「打印」按鈕不使用相同的基於Flash的方法）。路徑不應該是一個問題（我知道.swf路徑是一個常見問題），因爲工作的配置只是複製其他人的配置。這在Django服務器上運行。以下是代碼。我主要是用Python編寫的，所以我對JS/CSS/DOM不是很輕鬆，所以我們不勝感激。

<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> 

（...略...）

<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

你可以試試這個代碼：

$(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 2

亞歷山大馬修提供在自己的博客解決方案：http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

這工作對我來說（jQuery 1.8）：

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

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

表必須在初始化過程中可見。

如果沒有，只是呼籲像顯示fnResizeButtons（2個選項）：

$("#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 4

@ *加載數據表JS * @ @部分腳本{

<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> 

}