jquery – Datatables TableTools在同一页面上的多个表

前端之家收集整理的这篇文章主要介绍了jquery – Datatables TableTools在同一页面上的多个表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在同一页面上遇到了多个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":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: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },"sAjaxSource": "scripts/business_serverside.PHP",iDisplayIndex ) {
        $('td:eq(6)',nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },8]
        }
        }).columnFilter({   
            aoColumns: [ 
                    { type: "select"},{ type: "text" },{ type: "select" },{ type: "text"}
                ]
        }); 



    // Implements the dataTables plugin on the HTML table
    var $lmTable= $("#line_managers_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },"aButtons": [
                {
                    "sExtends": "print"
                }
            ]       },"sAjaxSource": "scripts/line_managers_serverside.PHP","sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 


    // Implements the dataTables plugin on the HTML table
    var $dTable= $("#divisions_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },"sAjaxSource": "scripts/divisions_serverside.PHP","iDisplayLength": 20,"sDom": '<"clear"><"top"Tfilr<"clear">pt>'
        }); 

});
</script>

解决方法

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

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

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

根据您的情况改变大小.

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

原文链接:https://www.f2er.com/jquery/175685.html

猜你在找的jQuery相关文章