Экспорт TableTools не работает в DataTables на нескольких вкладках JQuery
Я использую DataTables-1.8.2, TableTools-2.0.1 и JQuery-1.6.4 для отображения таблицы на каждой из трех вкладок jQuery. TableTools предоставляет функции экспорта в таблицу /Excel/PDF/Print и отлично работает только на первой таблице только на первой вкладке. На двух других вкладках отображаются кнопки, но ни одна из них не делает ничего, кроме кнопки "Печать" (это потому, что кнопка "Печать" не использует тот же метод на основе 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
4 ответа
Таблица должна быть видна во время инициализации.
Если нет, просто вызовите fnResizeButtons на дисплее следующим образом (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();
}
}
}
});
Александр Матье представил решение в своем блоге: http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools
Это сработало для меня (JQuery 1.8):
$("#tabs").tabs({
show: function(ui, event) {
ttInstances = TableTools.fnGetMasters();
for (i in ttInstances) {
if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
}
}
});
В jquery 1.9+:
$("#tabs").tabs({
activate: function(event, ui) {
ttInstances = TableTools.fnGetMasters();
for (i in ttInstances) {
if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
}
}
});
Вы можете попробовать этот код:
$(document).ready( function () {
TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls", "pdf" ];
TableTools.DEFAULTS.sSwfPath = "/static/swf/copy_cvs_xls_pdf.swf";
$('#tbl1').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"aaSorting":[],
});
.
.
.
});
@* Загрузка datatable js * @ @section Scripts {
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.tableTools.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="~/Scripts/DataTables/buttons.flash.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.min.js"></script>
<script src="~/Scripts/DataTables/jszip.min.js"></script>
<script src="~/Scripts/DataTables/pdfmake.min.js"></script>
<script src="~/Scripts/DataTables/vfs_fonts.js"></script>
<script>
$('#tabs').tabs({
activate: function (event, ui) {
$.fn.dataTable.tables({ visible: true, api: true }).buttons.resize();
}
});
$(document).ready(
function () {
$('#myTable').DataTable({
dom: 'Bfrtip',
responsive: true,
buttons: [
'copyFlash',
'excelFlash',
'csvFlash',
'pdfFlash'],
//'copyHtml5',
//'excelHtml5',
//'csvHtml5',
//'pdfHtml5'],
"ajax": {
"url": "/home/AjaxHandler",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
{ "data": "DateOfBirth", "autoWidth": true },
{ "data": "Address", "autoWidth": true }
]
});
$('#myTable1').DataTable({
dom: 'Bfrtip',
buttons: [
'copyFlash',
'excelFlash',
'csvFlash',
'pdfFlash'],
//'copyHtml5',
//'excelHtml5',
//'csvHtml5',
//'pdfHtml5'],
"ajax": {
"url": "/home/AjaxHandler1",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true }
]
});
});
</script>
}