Question

我在同一页面上遇到了多个DataTables和TableTools实例的问题。 DataTables工作正常，但是当使用TableTools时，只有第一个表完全使用了按钮。

所有表格上的所有按钮都显示正常，但是当您单击按钮时，它什么都不做。（除了'打印'按钮适用于所有4个表格）。

有没有人知道为什么会这样？我一直在寻找解决方案，但没有找到任何解决方案。

<script type="text/javascript"> 
jQuery( function( $ ) {

// Implements the dataTables plugin on the HTML table
    var $acTable= $("#academic_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/academic_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(4)', nRow).html(''+ aData[5] +'&nbsp;'+ aData[6] +'');
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,6]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text"},
                    { type: "select"},
                    { type: "select"},
                    { type: "select"},
                    { type: "text"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "xls",
                "csv",
                "pdf",
                "print"
            ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/business_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(6)', nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,8]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},
                    { type: "text" },
                    { type: "select" },
                    { type: "select"},
                    { type: "text"},
                    { type: "text"},
                    { type: "select"},
                    { type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/line_managers_serverside.php",
        "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 


    // Implements the dataTables plugin on the HTML table
    var $dTable= $("#divisions_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/divisions_serverside.php",
        "iDisplayLength": 20,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 

});
</script>

Answer 1

问题在于，<embed>元素的宽度和高度未定义，因为在初始化期间，表格应该是可见的。

我通过简单的CSS规则

解决了这个问题

.DTTT_button embed {
    width: 50px;
    height: 24px;
}

根据您的情况改变大小。

无需任何功能和其他额外编码。

Answer 2

如果您隐藏/显示表格，则必须致电fnResizeButtons()。还要确保至少有数据表版本1.8。这个问题肯定与无法正常工作的Flash插件有关

Answer 3

检查sSwfPath并确保Flash文件实际存在。另请注意，您使用的是相对路径。尝试使用绝对路径以确保您获得正确的位置。

---编辑---

这似乎不是一个罕见的问题。以下主题提到了“具有TableTools问题的多个表”的许多解决方案。

http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1

Answer 4

初始化期间必须可见表格。

如果没有，只需在显示屏上调用 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 5

我创建了一个帐户，只是说Kayz1的答案对我来说非常合适。（我没有足够的代表对他的帖子发表评论）

我遇到的问题与OP非常相似。我的问题源于在初始化期间表格不可见的事实。这是由于jqueryUI Tabs。修复是调用Kayz1上面列出的代码。我把它放在Tabs定义中，但它可能存在于其他地方。

以下是我对标签的确切定义。

            $("#tabs").tabs({
            show: function (event, ui) {
                var table = $.fn.dataTable.fnTables(true);
                if (table.length > 0) {
                    $(table).dataTable().fnAdjustColumnSizing();
                }                
            },
            activate: function (event, ui) {
                var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

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

Datatables TableTools在同一页面上有多个表

5 个答案: