Can't seem to get TableTools buttons right.

MrBaseball34

I'm trying to add two buttons to my table.

One is going to be used to initiate the search and the other is going to be to clear the search.
I am using server-side processing, too.
In all the examples, I see this:
[code]
"sDom": 'T<"clear">lfrtip',
[/code]

But if I put it in also, I lose UI styling.

What am I doing wrong here?
[code]
var dontSort = [];
$('#userInvtable thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
} );

oUserTable = $('#userInvtable').dataTable({
"aoColumns": dontSort,
"aaSortingFixed": [[1,'asc']],
"bStateSave": true,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 50,
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "datatable.php",
"aoColumnDefs": [{ "sClass": "center", "aTargets": [ 0 ] }],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html('');
return nRow;
},
"oTableTools": {"aButtons": [{"sExtends": "text",
"sButtonText": "Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click' ); // will be changed to submit search
}
},
{"sExtends": "text",
"sButtonText": "Clear Search",
"fnClick": function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click2' ); // will be changed to clear search
}
}
]
}
});
[/code]

MrBaseball34

No buttons show up at all.

di4bl0s

Hi MrBaseball,

Did you try adding the sDom parameter to Datatables
this to tell datatables to draw the TableTools plug-in

something like "sDom": '<"H"lfr>t<"F"ip>' if you use JQUERYUI or
find more info here http://datatables.net/usage/options#sDom
and here TableTools specific: http://datatables.net/extras/tabletools/initialisation

MrBaseball34

Like I said, if I use that sDom parameter, I lose all styling.

MrBaseball34

Alright, pardon me for being short. I am now using this sDom and the styling is fine:
[code]
"sDom": '<"H"lTfr>t<"F"ip>'
[/code]

EXCEPT, that the buttons are entirely too big and I need them to be above the filter area.
Do I use CSS styling to fix that?

di4bl0s

lol im currently in the exact same scenario, if i get out of it all let you know :)

MrBaseball34

Well, I have actually been able to get it somewhat looking like I want. I can't get the buttons to have the right background color nor the span ht the way I want it but I may be able to live with it.

di4bl0s

for me it seems TableTools is not picking up the "bJQueryUI": true parameter
and is therefor not generating classes for the ui

MrBaseball34

It is now if I use the default for when bjQueryUI is set:
[code]
<"H"lfr>t<"F"ip> (when bJQueryUI is true)
[/code]

I just added the 'T' before the 'f'

di4bl0s

ok they included v 1.1.4 as non .min.js file, grrrrr :P

di4bl0s

ok the package provided for TableTools is completly useless and is not the correct version
download the one here http://datatables.net/release-datatables/extras/TableTools/media/js/TableTools.js
thats the one the example used and works for me

MrBaseball34

I am using the correct one. If I use the sButtonClass parameter to allow me to style them, it causes very funny hover activity. It does not obey my style, though, it still uses the jQueryUI styling.

di4bl0s

hmm, good luck,
I downloaded the full package and it comes with the old plugin
now downloaded http://datatables.net/releases/TableTools-2.0.0.zip
my issues are solved im happy with my jqueryui drawing style :)
Happy DataTabling :)