Sourcecode and .CSS file for default example

thowi

Hi guys,

is it possible to get the sourcecode and .css file for this default example:
http://datatables.net/release-datatables/extras/TableTools/theme.html

I mean, not only the initialisation, but the full source and the .css would also be very very helpful for me.

Thank you very much and have a good weekend!
Regards, thowi

allan

Its there on the page :-). Just right click and select "View source" all the code is there.

Allan

thowi

Ah great, now i know what you mean. Yes, I found the CSS, nice!
Thank you!

thowi

Hi allan,

took me a while till I found time to really test your suggestion, sry for that.
I took the whole demo_table_jui.css and TableTools_JUI.css. Also, I checked the theme.html carefully to get all the relevant code for the grid itself. But after implementing everything, the look is still different from yours, as you can see in this picture here: https://dl.dropboxusercontent.com/u/1625441/grids.jpg

I think I must have missed something important, but I don't see, why:
1. The buttons won't appear
2. The table head looks different

Can you help me out on these two cases?
For better understanding, I pasted the code of my page here: http://pastebin.com/4ERYjLY8

Thanks for your help! I really appreciate it. Have a good weekend!
Cheers, thowi

tangerine

For one thing, you are using the TableTools example but I don't see where you are including TableTools.js.

thowi

Hi,

oh man, absolutely, you're right! Didn't see that... but now the buttons are there, nice:
https://dl.dropboxusercontent.com/u/1625441/grid.jpg
But nothing happens when clicking the buttons. E.g. PDF button: Klick on this one doesn't open the "save as..." menu like the demo page. Just the menu on button "Save" works and shows "Excel" and "CSV". But clicking these items doesn't go anywhere.

As you can see, the style of the buttons crashed - due to my regular website .css style.
That's not good... is there any possibility to fix this for the grid?

Also, the table head's design is not yet equal. Sorry for bothering you with this simple .css stuff - I'm not really familiar with this.

Here my latest code:
http://pastebin.com/H0mMMfKA

Thank you for your help!
Cheers, thowi

allan

It would be best if you could actually link us to the page you are working on. I don't see what it wrong with your code above, but there might be a 404 error or something else occurring that we'd only see with an actual example.

Allan

thowi

Hi Allan,

sure, here you are:
http://rfid.ocserv.de/?section=mod_rfid&human
Just select the Tab "View Database Content".


Cheers,
thowi

allan

Excellent - thanks for the link. I hadn't realised the table was in a tab. Please see this post for details on what is happening, why and how to resolve: http://datatables.net/forums/discussion/comment/23949

Regards,
Allan

thowi

Hi Allan,

that sounds very helpful and I implemented it immediately, but without any effect. The buttons stay the way they are - without any function :/
Or did I do something wrong here?

Cheers,
thowi

allan

I'd stick a console.log into the `show` event handler. Is it being called?

thowi

Hi Allan,

good advice, thank you! I found out that I missed one essential line:
"sSwfPath": ".../copy_csv_xls_pdf.swf",

Now I got it "half" running :)
As you can see, I need to klick onto "save" and AFTER THAT all other buttons work well. Before klicking "save", no other button is working.

Do you have a suggestion concerning this? Sounds very weird to me.

Cheers,
thowi

thowi

Ok, after further investigation:

As you mentioned in your above link (other thread) the fash area has a size of 0px 0px and I can see that. But right after klicking the button "save" these values will be overwritten and the flash works.

[code]$("#viewdbtabs").tabs({
"show": function(event, ui) {
//var table = $.fn.dataTable.fnTables(true);
var table = $('table.display', ui.panel);
console.log("wurschtbrot");
[/code]

At this position where I sent "wurschtbrot" to console I won't get a result, so the show event handler won't be called as you already suggested.

I've tried the basic code without and with check of fnResizeRequired(), of course doesn't matter if the handler won't be called.

So, what can I do? Do you have a suggestion for me?
CSS stuff is now solved - just this problem with the buttons is now open for me.

Thanks for your time and patience!

Cheers,
thowi

allan

You have `console.log("wurschtbrot");` but I'm not seeing that in the console. So the show event isn't firing.

Using jQuery UI 1.10 you need to use the `activate` event.

Allan

thowi

Aahhh, makes sense! So you mean this here: http://api.jqueryui.com/tabs/#event-activate
So according to this documentation I should use it like the following:

[code] $(document).ready(function() {
$("#viewdbtabs").tabs({
activate: function(event, ui) {
//var table = $.fn.dataTable.fnTables(true);
var table = $('table.display', ui.panel);
console.log("wurschtbrot");
if (table.length > 0 ) {
...[/code]

But I think this is not enough because nothing changed. But this should have been everything needed to be changed right?

Cheers,
thowi

thowi

Sorry to bother you again, but after little more trying around the grid is still not properly running. Above code change didn't work out well. I expected to see the colsole.log when activating the tab - but noting to see.
Actually I'm thinking I have to bind the event listener in addition to the above mentioned code.
Maybe something like:
[code]
$(document).ready(function() {
$("#viewdbtabs").tabs({
activate: function(event, ui) {};
$("#viewdbtabs").on("tabsactivate", function(event, ui) {
//var table = $.fn.dataTable.fnTables(true);
var table = $('table.display', ui.panel);
console.log("wurschtbrot");
if (table.length > 0 ) {
var oTableTools = TableTools.fnGetInstance( table[0] );
if ( oTableTools != null && oTableTools.fnResizeRequired() ) {
table.dataTable().fnAdjustColumnSizing();
oTableTools.fnResizeButtons();
}
}
})
});[/code]
But now the whole grid crashed*. So something is still wrong here and I don't know what. Good to know: NOW the console.log is viewable :)

Cheers,
thowi

*I now got back to the previous code to keep on working.