TableTools used alongwith jquery-ui-1.7.2.custom.css

ymagashe

Hello,

First of all, Hats of to Allan and all the contributors who have come up with such gem of software. Many sincere thanks.

I am using custom jquery theme, flick, as my theme. I am also using TableTools plugin. This is my initialization code.

$(document).ready(function() {
$('#program_results').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip'
} );
} );

As soon as I initialize TableTools, custom header and footer block footer of table styling goes away.
Please see the screenshots attached so that my problem will be clarified.
1) Without TableTools initialization
http://picasaweb.google.com/yogesh.agashe/DataTables?authkey=Gv1sRgCJfQhOut1IPZYw#5387116982336561490
2) With TableTools initialized
http://picasaweb.google.com/yogesh.agashe/DataTables?authkey=Gv1sRgCJfQhOut1IPZYw#5387116987932317266

Please let me know where I am getting wrong.

Thanks very much.

Yogesh

allan

Hi Yogesh,

sDom actually changes it's default when you are using bJQueryUI: true, to have the default of (http://datatables.net/usage/options#sDom ):

[code]
<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>
[/code]
Therefore, to use TableTools along with jQuery UI themes, you just need to define sDom as something like:

[code]
T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>
[/code]
Regards,
Allan

ymagashe

Thanks so much Allan. I really appreciate your to the point and quick reply. It works now.

However, Just to be sure. I have posted a screenshot below.

http://picasaweb.google.com/yogesh.agashe/DataTables?authkey=Gv1sRgCJfQhOut1IPZYw#5387314172722028610

I noticed 2 things. Please let me know if this behavior is expected.
1) Search box is getting pushed to the left since TableTools row is above it.
2) When we initialize only UIthemes, On very first page of the results, First and Previous tabs are grayed out. (as seen in the first screenshot of my earlier post.). When I initialized sDom with above code, First and Previous tabs are not grayed out. But you can't click them though.

Thanks again for the feedback.

Sincerely,
Yogesh

ymagashe

Regarding my second point (First and previous not being grayed out). I noticed that in chrome and firefox, they are grayed out. I am using IE8 and they are not grayed out in IE8.

allan

Hi ymagashe,

1. This will just be a combination between the CSS that is being used, and the sDom parameter laying out the DOM structure for the generated elements. It might be that you need T<"clear"> or something like that at the start.

2. I think this is to do with the CSS that the theme presents. I'm guessing that you are using the flick theme from your screenshot?

http://datatables.net/styling/themes/flick - this doesn't appear to have any enabled / disabled for the buttons
http://datatables.net/styling/themes/ui-darkness - this is probably the most obvious change in colour - although it's still quite subtle. Either way, the behaviour I'm seeing is the same in IE8 as the other browsers (is your cache cleared? :-) ).

Regards,
Allan

ymagashe

Hi Allan, Clearing the cache worked fine. :) Thanks.

I am sorry but I am not able to manipulate that. I already tried it. This is what I tried to do.

$('#program_results').dataTable( {
"bJQueryUI": true,
"sDom":'T<"clear">',
"sPaginationType": "full_numbers",
"sDom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
} );

This didn't work. Is there anything that needs to be changed in the code?

Thanks again.
Yogesh

allan

Try:

[code]
$('#program_results').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
} );
[/code]
(assuming of course that you have a css block with is ".clear { clear:both; }").

Regards,
Allan

ymagashe

Works perfect :)

Thank you so much. I wouldn't have been able to figure this out without your help.

I really appreciate your replies and such nice friendly way of communication. I am going to recommend this plugin to as many people as I can. This is a gem.

Thanks and Regards,
Yogesh

jborrajo

Hi guys

I was not happy with the way the TableTools buttons were located in between the main action buttons toolbar and the DataTables toolbar. Too much screen wasted. So I wanted to move the TableTools buttons inside the main action buttons toolbar.

I got to do that using jQuery appendTo. Very easy once you know the trick. Also tweaked with the CSS settings a little to blend the TableTools buttons into the toolbar more to my liking :-)

Please see 3 pics: before, after jQuery appendTo and after CSS tweaking here:

http://picasaweb.google.com/javiborr/JQueryDataTables?authkey=Gv1sRgCMfOjMeUqtPWrwE#5387685706314617954

How to move the TableTools toolbar (it's a div) to a div "TableToolsToolbar" inside the main toolbar:
[code]


...




...
...
$("div .TableTools").appendTo("#TableToolsToolbar");
[/code]

HTH

Best regards

Javier

allan

Hi Javier,

Thanks for this. Further to what you have mentioned, this is exactly that the sDom parameter is designed for. You don't need to have the 'T' at the start of the sDom parameter - you can place it anywhere. Example: http://datatables.net/examples/basic_init/dom.html . However, if you want to move the created DIV outside of the DOM range that DataTables has control of, then yes, this is the best way to do it.

Regards,
Allan

giorgio79

Just had this with a themeroller theme. Would be great to have it in the docs :)

I also cannot get it to work with buttons like this, the header falls apart.
[code]
"sDom": '<"toolbar"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr><"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
} );

.....

$("div.toolbar").html('');
[/code]
Any tips please? :)

javi1065

Greetings:

I'm having problems with the tabletools buttons four of them don't work, only the print one. Here's the initialisation code css classes and .js, when the page loads it asks for permissions for flash then an x appears on the first four buttons:

[code]

@import "jQuery/css/demo_page.css";

@import "jQuery/css/demo_table_jui.css";

@import "uicustom/css/overcast/uicustom.css";

@import "jQuery/Corp.css";

@import "TableTools/media/css/TableTools.css";




















$(document).ready(function() {


$('#tableTareas').dataTable( {
"sDom" : 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "TableTools/media/swf/copy_cvs_xls_pdf.swf"
}

});

$("#txtFechaDesde").datepicker();
$("#txtFechaHasta").datepicker();

});

[/code]

demo

plase please help whith tool bar print my code like this this:




DataTables





@import "media/css/demo_table_jui.css";
@import "media/themes/smoothness/jquery-ui-1.8.4.custom.css";



*{
font-family: arial;
}


$(document).ready( function () {
$('#datatables').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'


} );
} );











Country
Population
Internet Users
Penetration
Users
butt



<?php
while ($row = mysql_fetch_array($result)) {
echo "";
echo "";
echo $row['uporabnik']."
";
echo "";
echo $row['geslo']."
";
echo "";
echo $row['podjetje']."
";
echo "";
echo $row['naslov']."
";
echo "";
echo $row['email']."
";
echo "";
echo "";
echo "";
echo "";
echo "";
}
?>






-----------------------------------------------
and i cant see the print button can sombdy fix my code i try hudrent times

walfredo

Hi, sorry for my english(i´m a brazilian)!

I want change the location of the toolbars. I want put the toolbar out of div class="dataTables_wrapper"

look this example:

i have this code below
[code]




BUTTONSSSSSS


<!--CLOSE -->
[/code]

I want this

[code]

BUTTONSSSSSS<!--OUT OF dynamic-->







<!--CLOSE -->
[/code]

All my test dont work... HEEEELP!

vikasmangla

Hi,
I was using the data tools, and came across 2 things below,

1) I need to customize my Pdf button, and needs to add a image i.e. pdf image against the same
2) I can disable the search box, and Show ... entries...

Thanks in advance,
Vikas