TableTools导出在多个JQuery选项卡上的DataTable中不起作用 [英] TableTools export not working in DataTables on multiple JQuery tabs
本文介绍了TableTools导出在多个JQuery选项卡上的DataTable中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.swf 路径是一个常见的问题），因为一个工作的配置只是为其他人复制。这是在Django服务器上运行的。以下是代码。我大部分都是用Python编写的，所以我对JS / CSS / DOM不是那么容易，所以任何建议都是值得赞赏的。 ; script type =text / javascript>
$（document）.ready（function（）
{
//启动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>
（... snip ...）
< div id =tabsclass =ui-tabsstyle =float：left>
< ul>
< li>< a href =＃tabs-1>表1< / a>< / li>
< li>< a href =＃tabs-2>表2< / a>< / li>
< li>< a href =＃tabs-3>表3< / a>< / li>
< / ul>
< div id =tabs-1height：100％>
{％if all_commercial％}
< div class =dataTables_wrapperid =example_wrapper>
< div style =position：relative; class =DTTT_container>
< div class =clear>< / div>
< table id =tbl1class =display>
＃（... snip ...）
< / table>
< / div>
< / div>
{％else％}
< p>没有数据可用。< / p>
{％endif％}
< / div>
< div id =tabs-2height：100％>
{％if all_commercial％}
< div class =dataTables_wrapperid =example_wrapper2>
< div style =position：relative; class =DTTT_container>
< div class =clear>< / div>
< table id =tbl2class =display>
＃（... snip ...）
< / table>
< / div>
< / div>
{％else％}
< p>没有数据可用。< / p>
{％endif％}
< / div>
＃等第三个表
解决方案
表必须在初始化期间可见。
如果没有，只需打电话给 fnResizeButtons （2个选项）：
$（＃tabs）。tabs（{
activate：function（event，ui））
{
/ / $ 1.
$（'table'，ui.panel）.each（function（）
{
var oTableTools = TableTools.fnGetInstance（this）;
if（oTableTools&& oTableTools.fnResizeRequired（））
{
oTableTools.fnResizeButtons（）;
}
}）;
/ /或版本2.
var tableInstances = TableTools.fnGetMasters（），instances = tableInstances.length;
while（instances--）
{
var dataTable = tableInstances [instances];
if（dataTable.fnResizeRequired（））
{
dataTable.fnResizeButtons（）;
}
}
}
}）;
I am using DataTables-1.8.2, TableTools-2.0.1 and JQuery-1.6.4 to display a table on each of three jQuery tabs. TableTools provides the Copy/Excel/PDF/Print export features for the table and it works great on the first table on the first tab only. On the other two tabs, the buttons are displayed, but none of them do anything except the Print button (this is because the Print button does not use the same Flash-based method). Paths should not be an issue (I know the .swf path is a common problem) because the configuration of the one that works was just copied for the others. This is running on a Django server. Below is the code. I write in Python mostly, so I am not very facile with JS/CSS/DOM, so any suggestions are appreciated.
<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>
(...snip...)
<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
解决方案
Table must be visible during the initialization.
If not, just call fnResizeButtons on display like that (2 options):
$("#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();
}
}
}
});
这篇关于TableTools导出在多个JQuery选项卡上的DataTable中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
