我在同一页面上遇到了多个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] +' '+ 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] +' '+ 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;
}
根据您的情况改变大小.
不需要任何功能和其他额外编码.