TableTools used alongwith jquery-ui-1.7.2.custom.css
TableTools used alongwith jquery-ui-1.7.2.custom.css
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
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
This discussion has been closed.
Replies
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
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
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
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
[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
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
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
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
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? :)
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]
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
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!
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