我使用 DataTables-1.8.2、TableTools-2.0.1 和 JQuery-1.6.4 在三个 jQuery 选项卡上分别显示一个表格。 TableTools 为表格提供了复制/Excel/PDF/打印导出功能,并且仅适用于第一个选项卡上的第一个表格。在其他两个选项卡上,会显示按钮,但除了“打印”按钮之外,它们都不执行任何操作(这是因为“打印”按钮不使用相同的基于 Flash 的方法)。路径不应该成为问题(我知道.swf
路径是一个常见问题),因为有效配置的配置只是复制给其他配置。它在 Django 服务器上运行。下面是代码。我主要用 Python 编写,所以我对 JS/CSS/DOM 不太熟悉,所以任何建议都会受到赞赏。
<script type="text/javascript">
$(document).ready(function()
{
// Initiate datatable
fnFeaturesInit();
$('#tbl1').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"aaSorting":[],
"oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
});
$('#tbl2').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"aaSorting":[],
"oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
});
$('#tbl3').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"aaSorting":[],
"oTableTools": { "sSwfPath": "/static/swf/copy_cvs_xls_pdf.swf" }
});
}
</script>
(……剪断……)
<div id="tabs" class="ui-tabs" style="float:left">
<ul>
<li><a href="#tabs-1">Table 1</a></li>
<li><a href="#tabs-2">Table 2</a></li>
<li><a href="#tabs-3">Table 3</a></li>
</ul>
<div id="tabs-1" height:"100%">
{% if all_commercial %}
<div class="dataTables_wrapper" id="example_wrapper">
<div style="position: relative;" class="DTTT_container">
<div class="clear"></div>
<table id="tbl1" class="display" >
#(...snip...)
</table>
</div>
</div>
{% else %}
<p>No data are available.</p>
{% endif %}
</div>
<div id="tabs-2" height:"100%">
{% if all_commercial %}
<div class="dataTables_wrapper" id="example_wrapper2">
<div style="position: relative;" class="DTTT_container">
<div class="clear"></div>
<table id="tbl2" class="display" >
#(...snip...)
</table>
</div>
</div>
{% else %}
<p>No data are available.</p>
{% endif %}
</div>
# etc for third table
表在初始化期间必须可见。
如果没有,只需致电fn调整大小按钮像这样显示(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();
}
}
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)