Problem with the TableTools using Twitter Bootstrap

ikharus

I imported TableTools into my project using this example:

http://datatables.net/release-datatables/extras/TableTools/bootstrap.html

Is it just for me or there is a problem with the Save dropdown menu ?? Only the PDF option seems selectable (which is also the case for my project).

If someone have an idea how to solve this it would be great!!

allan

Can you link us to the page you are having problems with please?

Also, are you using the very latest integration files from here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap

Allan

ikharus

Thanks for the reply!!

Yes I have the last version (got it from the "view source" option on the WEB page of the example) and actually I can't really link anything because my project is really big and implies a lot of technologies (oracle database, spring, etc...). It will be use in an intranet.

However, I'm having this problem also with the example on your site. If you go there:

http://datatables.net/release-datatables/extras/TableTools/bootstrap.html

and select the Save drop-down menu. You can only click on the first menu item, CSV, and it is the save as PDF action that seems to occur. The others 2 options (XSL and PDF) are "selectable", but not "clickable". I tried with both firefox and Internet explorer.

It is not the same for you??

allan

Yes it is actually - something seems to have gone wrong somewhere. Possibly as part of the Bootstrap 2.1 update - its perhaps knocked my integration slightly out. I will look into it.

Allan

ikharus

OK Thanks!!

I tried to solve the problem myself but honestly I failed. I downgraded my Twitter Bootstrap from to 2.1.1 to 2.1.0 and the problem was already there with the 2.1.0 version of bootstrap so my idea to "compare the 2 bootstrap versions with WinMerge and pinpoint the problem to impress Allan" was not a so good idea after all! :)

ikharus

I downgraded to bootstrap 2.0.3 and the problem is still there! I do think that maybe it's not related to bootstrap!

allan

Thanks for the investigation! I'm not sure what is causing the issue in that case - it certainly used to work, so I guess I've unfortunately broken something in TableTools... Hope to look at it later today.

Allan

ikharus

Hi Allan!

First of all, congrats for the new version and your great work!!!

I've (already) updated my version of DataTables in order to see if there is a change regarding the issue this thread addresses. In fact, there is!! But not in the right direction :). But maybe it will help focusing the exact source of the problem!! Now, not only the XSL and CSV options cannot be activated, but the PDF option as well! I tried (again) to use the WinMerge tool to compare the versions 1.9.3 and 1.9.4 of DataTables (TableTools) to pinpoint the change that causes the new behavior, but I realized that I have a lot of 'croutes à manger' (crust to eat, as we say in french), to understand an API as rich as DataTables (coded in language I never heard of a year ago (month ago, but that is between us and my employer must be kept out of the loop :)!! )).

I understand that your todo list must be somewhat as huge as the Eiffel Tour so I don't expect that this isolated bug (it requires DataTables + TableTools + Twitter Bootstrap + Tutorials to merge all of these together) will be your priority but if you had a (tiny) idea where I could start my search to find the source of the problem, it would be very appreciated!!! I'm willing to investigated the problem and shared my conclusion (hopefully solution) with the DataTables community but for now, I must say that I do not know if it would be better for me to suspect the jquery.dataTables.js file, the TableTools.js file, the jquery.dataTables.css file or all (none) of the above!!!

Thanks again Allen! It is not critical since I can temporarily comment the TableTools stuff (so do not loose a second of your precious sleep for that), but when you have a chance, a "I would check that file first" hint would be appreciated!!!

Have a nice day!!!

Simon (who is sorry for his 'far from perfect' english!!)

ikharus

My apologies!!! The unwanted behavior stayed the same, I can print PDF report!! It is my new version integration that was buggy!!!

ikharus

Just to share my findings according to this problem. I downgraded my TableTools.min.js until it works and it was in the version 2.1.3 that the bug was introduced! I may finally be able to use WinMerge between 2.1.2 and 2.1.3!! :D

ikharus

Hmm now it becomes really out of my understanding!! After my comparison of the TableTools.js version 2.1.2 and 2.1.3, I was confused since nothing hit me as the source of the problem. So I decided to include the .js file into my project instead of the .min.js file.

It appears that none of the .js file works (I tried 2.1.1 up to 2.1.4) but for the .min.js file, the bug is not always there!! (2.1.1 and 2.1.2 works but not 2.1.3 and 2.1.4)!

I'm totally lost! I do not know how a file is minimized.

allan

I've just committed a fix for this:
http://datatables.net/release-datatables/extras/TableTools/bootstrap.html

The problem was that the container for the Flash element is absolutely positioned, but the LI container wasn't an offset parent, so they were in the wrong place...

This is the fix:
https://github.com/DataTables/Plugins/commit/9556be3b19c5c46e393b7ebaae7f402c03d992cb

Thanks for your investigation and flagging this up!

Allan

ikharus

GOT ITTTTTTT!!!!!!!

But don't understand it!!! I saw that in the minimized file, the ZeroClipboard.js file is embedded into the TableTools file.

So I started looking for changes into ZeroClipboard.js file.

Now I have the TableTools.js file version 2.1.4 that works with the ZeroClipboard.js with these 2 lines uncommented (lines 143):

//style.left = (this.domElement.offsetLeft)+'px';
//style.top = this.domElement.offsetTop+'px';

These lines have been commented in the ZeroClipboard.js file of the 2.1.3 version of TableTools.

I would like to use the minimized version of TableTools. Do you remember why these lines were commented ? Is it safe to rollback the change and use the non-minimized file in my project ?

Thanks Allan!

ikharus

Oupss.. It seems thank we were writting at the same time!!!

allan

There have been a lot of changes to how the embedded of the Flash movie clips, and the buttons in general between 2.1.0 - 2.1.3 and 2.1.4. I'd suggest just ignoring the old versions. If any bugs are found, debug the issue with the current release, and ignore what has gone before in this case since it has all intentionally changed :-). This was a bug introduced, but not a regression itself (although it did look like it).

Allan

ikharus

Wow... Your solution is so much better!! Just tested it and it works like a charm!

I will follow your advice next time I'll investigate a bug!!! But honestly, I don't think I would have found this solution. It's time to make popcorn and watch several hours of CSS tutorial on youtube!!!

Thanks a lot and have a nice day!!!

Simon

fabi

This is driving me crazy but I can't figure it out! The PDF/Copy/XLS buttons are disabled for me and I can't seem to make them work.

I copied the whole example page and pasted in here http://www.tursites.com.br/fabi/teste.htm to see if it works and...it doesn't. Is it working for any of you ? because this doesnt seem possible to me....

Thanks!

allan

@fabi:

> media/swf/copy_csv_xls_pdf.swf - Failed to load resource: the server responded with a status of 404 (Not Found)

That would do it.

Allan

fabi

Hi Allan, thanks for your help! I didn't think the swf would be needed since I had the bootstrap version of buttons..

allan

The swf is what provides the export abilities - not any styling.

Allan

fabi

@allan, got it. How do you export the PDF file on there? I was just wondering because I've always used PHP to do so, but you seem to use a different method..

allan

TableTools is client-side based, so I've used Flash and the AlivePDF project ( http://alivepdf.bytearray.org/ ), which ironically appears to be on the dead side of things.

Allan

fabi

Oh I've heard of it... interesting! I came across jspdf but it only works in certain browsers.. thanks again!