Datatables TableTools 同一页面上的多个表答案

【问题标题】：Datatables TableTools multiple tables on the same pageDatatables TableTools 同一页面上的多个表
【发布时间】：2012-08-07 14:51:58
【问题描述】：

我在同一页面上遇到多个 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>

【问题讨论】：

标签： jquery datatables tabletools

【解决方案1】：

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

我通过简单的 CSS 规则解决了它

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

根据你的情况改变尺寸。

不需要任何功能和其他额外的编码。

【讨论】：

也为我工作，谢谢！

【解决方案2】：

如果您要隐藏/显示表格，您必须致电fnResizeButtons()。还要确保至少有 1.8 版的数据表。这个问题肯定是flash插件不能正常工作的原因

【讨论】：

谢谢，版本没问题。这与以下代码相同：stackoverflow.com/questions/11797719/… - 我需要为显示/隐藏表格的每个 div 运行 fnResizeButtons() 吗？
Nicola Peluchetti：不能让这个工作，请给我一个例子。

【解决方案3】：

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

--- 编辑---

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

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

【讨论】：

感谢您的回复，但这不是问题，当我只使用一个实例时，路径很好并且有效。还有其他想法吗？
我添加了一个可能有用的链接。如果您还没有，请务必不要错过显而易见的内容并获取最新版本的 TableTools、DataTables 等。

【解决方案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();
                        }
                    }
                }
            });

【讨论】：

【解决方案5】：

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

我遇到了一个与 OP 非常相似的问题。我的问题源于表在初始化期间不可见的事实。这是由于 jqueryUI 选项卡。解决方法是调用 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();
                    }
                }
            }
        });

【讨论】：