TableTools Print loses table headers when using AJAX source and initially flashes incomplete table

sanelson

I just realized that when the DataTable has an AJAX source, the print function performs an AJAX call to load the entire table, which is pretty cool... now to get it working with Copy, CSV, and PDF! ;-).

Anyway, I noticed that after the AJAX call is completed, the table headers are being removed. It would be nice if they remained.

Another issue regarding this functionality is that the part of the table that is loaded on the screen is initially shown in the print preview, and then all of a sudden it gets replaced with the results from the AJAX call. Ideally, the initially loaded table should never be displayed, and a loading indicator should be shown instead.

allan

Can you link me to an example page showing the problem please? Certainly it shouldn't be removing the headers!

Allan

acarlson

I'm seeing this also, can't provide a link as it's in alpha development locally, but I can give you a bunch of source and page source.

First, it looks like the th fields are there and styled, but in between the tags is null. Even though the json data I return has key/value pairs.





Here's the code I'm using to activate the table, (probably not the greatest, but like I said we're just flushing out plugins to use on this project.)

$('#dTable').dataTable( {
"bProcessing": true,
"bAutoWidth": true,
"sAjaxSource": 'api.php?function=inventory&action=showinstock&ajax=true',
"aoColumns": [
{ "mData": "id" },
{ "mData": "type" },
{ "mData": "active" },
{ "mData": "sku" },
{ "mData": "short_description" },
{ "mData": "description" },
{ "mData": "cost" },
{ "mData": "price" }
]
} );


We've been using flexgrid in the past, but I wanted something easier, this really did plug right in once I got a few things worked out.

Hope this helps, if not, just shoot me an email and I can provide all sorts of data - but this site isn't on a live server yet.
Andrew

dthunsterblich

I'm having the same issue.

I use Server-side processing with PHP and an Oracle Database. If I click on the print button the previously selected part of the table (last Ajax request) is shown for a second with the correct formatted headers and content (only 10 rows, because that's the size of my iDisplayLength). In Firebug I can see that Table Tools launches another Ajax request to get all entries of my Select statement out of the Database. This works great accept for the part that the headers mysteriously disappear.

Any idea how to fix that bug or have a workaround?

dth-unsterblich

sanelson

Sorry, I thought I'd get an email if this was updated, so I didn't know it was ever replied to. I sent a PM with a link to an example. I can't post it publicly.

Thanks.

allan

@sanelson: Thanks very much for the link! Its a lowed to to get to the bottom of what is causing this.

Basically the problem is that if you do a 'draw' when scrolling is enabled, while in the 'print view' (this happens automatically if you are using server-side processing, which is where you would most likely see this problem - as you are) then the scrolling function gets a little confused before TableTools manipulates the HTML structure of the table when in print view (sweeping the carpet out from under its feet as it were).

Unfortunately I'm not able to think of a trivial fix at the moment, so I'm going to have to come back to this one and spend a little bit more time tying to figure out what the correct thing to do is I think. I'll post back when I've got something.

Allan

sanelson

Thanks for looking into this, allan, and for all your hard work on these projects.

allan

Just fixed this in commit 9d93593 and will be in the 2.1.4 release of TableTools, which is coming right up :-)

Regards,
Allan

dthunsterblich

It works!

Thank you very much.

Great work ;)

sanelson

This works for me also. Thanks!

As far as the other issue that I brought up regarding there being no indication that the table is loading, it looks like the table is trying to show its standard Processing... dialog, but it is being hidden along with everything else when the entering the print view. Perhaps hiding this could be skipped as well as the table? The only problem is that the Processing dialog happens to be inside of the toolbar, which is hidden as well. Maybe it would have to be copied and re-inserted somewhere else in the DOM? I'm not sure of the best way to handle it. It is kind of an important issue, though, since the table can take several seconds to load entirely, depending on what it is trying to load, and the user has no way of knowing what's going on.

Thanks,
Scott

sanelson

FYI, I was able to get around the Processing dialog not displaying with some CSS, and also hide the table before it is fully loaded:

body.DTTT_Print .dataTables_processing {
display: block !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 250px 0 0 0;
z-index: 10000;
}

body.DTTT_Print .ui-toolbar.ui-widget-header {
display: block !important;
visibility: hidden;
height: 0;
border: none;
padding: 0;
margin: 0;
font-size: 0px;
}

Denonth

This thing is not working for me, I have tried to change new TableTools script and problem still persist.
This is my initialization code for the table:
[code]
$('#stajanja').dataTable( {
"sDom": 'T,lfrtip',
"oTableTools": {
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
},

"aaSorting": [[0,'desc']],
"bProcessing": true,
"bServerSide": true,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 7 , 8] }
],
"sPaginationType": "full_numbers",
"sScrollY": "370px",
"bDeferRender": true,
"sAjaxSource": new_url ,
"bDestroy": true

} )
;
[/code]

When I want to see print preview I can't see header and my table is in scroll mode so I can't print all the pages. What can I do?
Now one question off topic, is it possible to add some text above the table or bellow?

Thank you

seraphimpunk

using 2.1.4 as well, and having trouble with the table field names not displaying in the csv.

using:
var oTable = $('#tabletag').dataTable( {
"oLanguage" : {
"sSearch" : "Search all columns:"
},
"bProcessing" : true,
"sAjaxSource" : "<?php echo base_url('index.php/wizard'); ?>",
"bDeferRender" : true,
"sDom" : 'T<"clear">lfrtip',
"oTableTools" : {
"sSwfPath" : "<?php echo base_url('_assets/swf/copy_csv_xls_pdf.swf'); ?>",
"aButtons" : [
"copy",
"csv"
]
}
} );