Datatables TableTools同一页上的多个表 [英] Datatables TableTools multiple tables on the same page

问题描述

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

I am having problems with multiple instances of DataTables and TableTools on the same page. The DataTables are working fine, but when using TableTools only the first table is working fully with the buttons.

所有按钮在所有表格上都显示正常，但是你点击一个按钮它什么都不做。 （除了打印按钮可用于所有4个表格）。

All buttons are appearing fine on all tables but when you click a button it does nothing. (apart from 'Print' button works on all 4 tables).

有没有人有任何想法为什么会发生这种情况？我一直在寻找一个解决方案，但没有找到任何。

Does anybody have any ideas why this is happening? I have been searching for a solution but not found any.

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

推荐答案

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

The problem is that there is an <embed> element with undefined width and height, because table should be visible during initialization.

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

I solved it via simple CSS rule

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

根据您的情况更改大小。

change sizes according to your situation.

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

No need any functions and other extra coding.

这篇关于Datatables TableTools同一页上的多个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！