TableTools导出在多个JQuery选项卡上的DataTables中不起作用

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

初始化期间必须可以看到表.

如果没有,只需在显示器上调用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();
                        }
                    }
                }
            });