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":true},
{"bVisible":true},
{"bVisible":true},
{"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: "select"},
{ type: "select"},
{ type: "text"},
{ type: "text"}
]
});
// Implements the dataTables plugin on the HTML table
var $buTable= $("#business_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/business_serverside.php",
"iDisplayLength": 10,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"clear"><"top"CTilr<"clear">pt>',
"aoColumns": [
{"bVisible":false},
{"bVisible":true},
{"bVisible":true},
{"bVisible":true},
{"bVisible":true},
{"bVisible":true},
{"bVisible":true},
{"bVisible":true},
{"bVisible":false}
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(6)', nRow).html(''+ aData[7] +' '+ aData[8] +'');
},
"oColVis": {
"activate": "mouseover",
"aiExclude": [0,8]
}
}).columnFilter({
aoColumns: [
{ type: "select"},
{ type: "text" },
{ type: "select" },
{ type: "select"},
{ type: "text"},
{ type: "text"},
{ type: "select"},
{ type: "text"}
]
});
// Implements the dataTables plugin on the HTML table
var $lmTable= $("#line_managers_table").dataTable( {
"oLanguage": {
"sSearch": "Filter:"
},
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "print"
}
] },
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/line_managers_serverside.php",
"iDisplayLength": 10,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"clear"><"top"Tfilr<"clear">pt>'
});
// Implements the dataTables plugin on the HTML table
var $dTable= $("#divisions_table").dataTable( {
"oLanguage": {
"sSearch": "Filter:"
},
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "print"
}
] },
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/divisions_serverside.php",
"iDisplayLength": 20,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"clear"><"top"Tfilr<"clear">pt>'
});
});
</script>
5 ответов
Проблема в том, что есть <embed> элемент с неопределенной шириной и высотой, потому что таблица должна быть видна во время инициализации.
Я решил это с помощью простого правила CSS
.DTTT_button embed {
width: 50px;
height: 24px;
}
изменить размеры в соответствии с вашей ситуацией.
Не нужно никаких функций и прочего лишнего кодирования.
Если вы прячете / отображаете таблицы, вы должны вызвать fnResizeButtons (). Также убедитесь, что у вас есть как минимум версия datatables 1.8. эта проблема, безусловно, связана с плагином Flash, который работает неправильно
Таблица должна быть видна во время инициализации.
Если нет, просто вызовите 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();
}
}
}
});
Проверьте ваш sSwfPath и убедитесь, что файл Flash действительно существует там. Также обратите внимание, что вы используете относительный путь. Попробуйте использовать абсолютный путь, чтобы убедиться, что вы нашли правильное местоположение.
--- Редактировать ---
Это не является необычной проблемой. В следующем потоке упоминается несколько решений "проблемы с несколькими таблицами с помощью TableTools".
http://datatables.net/forums/discussion/3963/tabletools-on-multiple-tables/p1
Я создал аккаунт только для того, чтобы сказать, что ответ Kayz1 отлично сработал для меня. (У меня не было достаточно представителей, чтобы прокомментировать его ветку)
У меня была проблема, очень похожая на ОП. Моя проблема возникла из-за того, что таблицы не были видны во время инициализации. Это было связано с вкладками jqueryUI. Исправление должно было вызвать код, указанный Kayz1 выше. Я поместил свой в определение вкладок, однако он может существовать в другом месте.
Вот мое точное определение вкладок.
$("#tabs").tabs({
show: function (event, ui) {
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
$(table).dataTable().fnAdjustColumnSizing();
}
},
activate: function (event, ui) {
var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;
while (instances--) {
var dataTable = tableInstances[instances];
if (dataTable.fnResizeRequired()) {
dataTable.fnResizeButtons();
}
}
}
});