TableTools not working for multiple datatables in multiple jquery UI tabs
TableTools not working for multiple datatables in multiple jquery UI tabs
pss
Posts: 19Questions: 0Answers: 0
Hi all,
I'm using datatables within jquery ui tabs. Also, there are two ui tabs within same page and each ui-tabs group contains 4 datatables.
1.) Problem is that TT isn't working ok. None of copy, csv and pdf are clickable. Print is clickable but it isn't showing full page when using browser's print preview function. I've same problem when I'm using multiple datatables on same page without ui-tabs.
2.) For bottom ui-tabs, when I click on tabs other than default first tab, datatables are truncated.
I tried all the tricks and hints I found in this forum and elsewhere in web, but of no avail.
Now please anyone if know the solution kindly help me.
Here is the datatable debugger link: http://debug.datatables.net/oquhim
I'm using datatables within jquery ui tabs. Also, there are two ui tabs within same page and each ui-tabs group contains 4 datatables.
1.) Problem is that TT isn't working ok. None of copy, csv and pdf are clickable. Print is clickable but it isn't showing full page when using browser's print preview function. I've same problem when I'm using multiple datatables on same page without ui-tabs.
2.) For bottom ui-tabs, when I click on tabs other than default first tab, datatables are truncated.
I tried all the tricks and hints I found in this forum and elsewhere in web, but of no avail.
Now please anyone if know the solution kindly help me.
Here is the datatable debugger link: http://debug.datatables.net/oquhim
This discussion has been closed.
Replies
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
::Report::
$(document).ready(function() {
$("#tabs1, #tabs2").tabs( {
"show": function(ui, event) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
ttInstances = TableTools.fnGetMasters();
for (i in ttInstances) {
if (ttInstances[i].fnResizeRequired()) ttInstances[i].fnResizeButtons();
}
}
} );
$('table.display').dataTable( {
//"sDom": '<"H"Tlfr>t<"F"ip>',
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sScrollY": 250,
"sScrollX": "100%",
"bScrollCollapse": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"oTableTools": {
"sSwfPath": "../DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "copy", "mColumns": "visible" },
{ "sExtends": "xls", "mColumns": "visible" },
{ "sExtends": "pdf", "mColumns": "visible", "sPdfOrientation": "landscape" },
"print"
]
}
} );
} );
.
.
.
<!-- --- TAB 1 Declaration --- -->
Week 1
Week 2
Week 3
Week 4
<!-- --- End of TAB 1 Declaration --- -->
<!-- --- Table Code for TAB 1 WEEK 1 --- -->
.
.
.
<!-- --- End of Table Code for TAB 1 WEEK 1 --- -->
<!-- --- Table Code for TAB 1 WEEK 2 --- -->
.
.
.
<!-- --- End of Table Code for TAB 1 WEEK 2 --- -->
<!-- --- Table Code for TAB 1 WEEK 3 --- -->
.
.
.
<!-- --- End of Table Code for TAB 1 WEEK 4 --- -->
<!-- --- End of for TAB 1 --- -->
<!-- --- TAB 2 Declaration --- -->
Week 1
Week 2
Week 3
Week 4
<!-- --- End of TAB 2 Declaration --- -->
<!-- --- Table Code for TAB 2 WEEK 1 --- -->
.
.
.
<!-- --- End of Table Code for TAB 2 WEEK 1 --- -->
<!-- --- Table Code for TAB 2 WEEK 2 --- -->
.
.
.
<!-- --- End of Table Code for TAB 2 WEEK 2 --- -->
<!-- --- Table Code for TAB 2 WEEK 3 --- -->
.
.
.
<!-- --- End of Table Code for TAB 2 WEEK 3 --- -->
<!-- --- Table Code for TAB 2 WEEK 4 --- -->
.
.
.
<!-- --- End of Table Code for TAB 2 WEEK 2 --- -->
<!-- --- End of for TAB 2 --- -->
.
.
.
[/code]
Also I'm using php codes and loop to fetch data in table's s via local db. Kindly help what is wrong with the code. Any help highly appreciated.
Thank you for your help and response.
I was bit busy in using some other features of DT, so couldn't respond in time.
Your suggestion of using fnAdjustColumnSizing(), fnResizeButtons() worked fine for tab1.
But when I clicked on other than tab-1, contents of table are collapsed badly and horizontal scrollbar also disappear. Buttons are also unclickable.
ScreenShot [some content manualy erased] :
http://i47.tinypic.com/124u0ds.png
Why is this happening? Do I need to call fnAdjustColumnSizing(), fnResizeButtons() on each table id rather than table class [var jqTable = $('table.display', ui.panel);]? or some looping is required?
Kindly help. Here is my initialization code:
[code]$(document).ready(function() {
$("#tabs1").tabs( {
"show": function(event, ui) {
var jqTable = $('table.display', ui.panel);
if ( jqTable.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() )
{
/* A resize of TableTools' buttons and DataTables' columns is only required on the
* first visible draw of the table
*/
jqTable.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
}
} );
$('#example1').dataTable( {
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sScrollY": 250,
"sScrollX": "100%",
"bScrollCollapse": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"oTableTools": {
"sSwfPath": "../DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "copy", "mColumns": "visible" },
{ "sExtends": "xls", "mColumns": "visible" },
{ "sExtends": "pdf", "mColumns": "visible", "sPdfOrientation": "landscape" },
"print"
]
},
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
/*
// Calculate the total ordered Amt and dispatched Amt for all Sales in this table (ie inc. outside
// the pagination)
*/
.
.
.// footer code to calc sum: working OK.
.
}
} );
$('#example2').dataTable( { //same as above '#example1' initialization. })
$('#example3').dataTable( { //same as above '#example1' initialization. })
$('#example4').dataTable( { //same as above '#example1' initialization. }) [/code]
Strange Behaviour ! I accidentally clicked on LengthMenu to change it from default 10 to 25, lo and behold, table displayed correctly. :D
But, TableTools buttons are yet unclickable on other than tab1 :(
Earlier, facing some issues on using with tabletools.
Here is link:
http://live.datatables.net/ocatar
But, that live.datatables.net isn't also producing exact output:
1. TT buttons are clickable for Tab1 (i.e. Week1 here) on my webpage(at localhost), but not clickable on output of test case.
2. When I tried to create tables with 80 row each on jsbin, table was truncated at the end giving unexpected output (probably JS Bin issue).
Firebug in firefox is showing following error on http://live.datatables.net/ocatar :
"NetworkError: 404 Not Found - http://live.datatables.net/media/swf/copy_csv_xls_pdf.swf"
What can be a correct link for that ?
My actual problem is: TT buttons are not clickable.
Any help highly appreciated.
TT buttons unclickable problem got solved by using example at:
http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools
Collapsing problem was solved by using:
http://datatables.net/api#fnTables
Though, I've gone through above links earlier, this time they clicked. :-)
Below is link to updated working code may be useful to someone in future:
http://live.datatables.net/ugosuf/edit#javascript
(Although jsBin is still showing collapsed table for unknown reason when clicking on other than TAB1. Changing LengthMenu will adjust columns again.)
Cheers..!!
PS:
[quote]pss said: Also, there are two ui tabs within same page and each ui-tabs group contains 4 datatables.[/quote]
Pls note that I had removed one jquery ui-tab group from webpage in final build.