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();
                        }
                    }
                }
            });

Answer 2

Alexandre Mathieu在他的博客中提供了一个解决方案：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

您可以尝试以下代码：

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

@ *加载数据表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>

}

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

4 个答案: