数据表TableTools在同一页上的多个表(Datatables TableTools multi

我有在同一页上的数据表和TableTools的多个实例的问题。 该数据表都做工精细，但使用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的标签。 此修复程序是调用Kayz1上面列出的代码。 我把我的的标签定义，但是它可能存在于其他地方。

这里是我的标签的确切定义。

            $("#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 multiple tables on the same page