6

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

5 回答 5

9

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

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

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

根据您的情况更改尺寸。

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

于 2013-09-03T09:37:20.933 回答
1

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

于 2012-08-07T16:29:40.033 回答
0

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

- - 编辑 - -

这似乎不是一个不常见的问题。以下线程提到了“使用 TableTools 问题的多个表”的许多解决方案。

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

于 2012-10-05T18:15:09.480 回答
0

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

如果没有，只需像这样在显示屏上调用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();
                        }
                    }
                }
            });
于 2013-04-15T13:22:41.967 回答
-1

我创建了一个帐户只是为了说 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();
                    }
                }
            }
        });
于 2014-06-13T14:58:50.890 回答