TableTools -- place the div elsewhere on the page?

meoshaugh

I need to put the TableTools div up within the title line of my page -- not within the dataTables_wrapper div. The page has too much header-type white space. Can I move it? I can't figure out how.

My page has this now:
Title input box Go button Help button
(TableTools div)
Table (DataTable)


I want it to look like this:
Title input box Go button (TableTools div) Help button
Table (DataTable)


Thank you for providing this support. I appreciate your making my life easier!!

Marian

allan

Hi Marian,

Let DataTables create the element inside dataTables_wrapper as normal, but once $().dataTable() has run, you can move the TableTools element anywhere you want using standard DOM methods. Something like:

document.appendChild( $(div.TableTools)[0] );

will put it at the end of the document. So you can put it anywhere now :-)

Regards,
Allan

meoshaugh

Yeah!! Thank you Allan. I created a div with an id of ttools
[code]

[/code]

And this is the code I used --
[code]
oTable = $('#forecast').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"sDom": '<"H"lfr>t<"F"ip>T'
});

$('#ttools')[0].appendChild($('.TableTools')[0]);
[/code]

It removed the TableTools from where it was and put it in my new div. Just what I wanted.

Thanks so much!!