TableTools -- place the div elsewhere on the page?

TableTools -- place the div elsewhere on the page?

meoshaughmeoshaugh Posts: 4Questions: 0Answers: 0
edited May 2010 in General
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

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • meoshaughmeoshaugh Posts: 4Questions: 0Answers: 0
    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!!
This discussion has been closed.