TableTools - jQuery ui - Overlapping buttons. Help!

flamableconcrete

So I am just trying to get into this whole datatables/tabletools thing, and I think I am doing something wrong. I have a simple HTML table that can be recognized as a dataTable, but when I try to theme it with jQuery it seems to only get some of the css or something because the buttons overlap and it is overall ugly. You can see what I am looking at here - http://twitpic.com/7dbdru

Here is my code...

[code]


<?php include("include/header.php"); ?>



$(document).ready(function(){
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [ "copy", "csv", "xls", "pdf" ],
"sSwfPath": "/scripts/jquery/plugins/DataTables-1.8.2/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf"
}
} );
});




Name
Telephone
Address




Bill Gates
555-777-8542
123 Fake Street


Some dude
123-456-7890
382 Washington St


Some dude
544-7054-2057
1120 Einstein Way


Arnold Schwarznegger
703-219-4848
1010 Oak St


The man in black
770-858-1231
5046 First Lane










[/code]

My header is this...

[code]







[/code]

What am I doing wrong?
I am running Apache 2.2 with PHP 5.3.6 - if that helps.

allan

Just replied to you on Twitter as well :-). I'd suggest including media/css/demo_table_jui.css and extras/TableTools/media/css/TableTools_JUI.css and demo_table_jui.css like in the demo: http://datatables.net/release-datatables/extras/TableTools/theme.html . Those files include the addition styling needs to make the table look nice. Alternatively you could pull out the CSS that you need from those files and add them to your own CSS.

Allan

flamableconcrete

Thanks! That got it looking a lot better. Not exactly perfect, but close enough to start me thinking about what else I can do.