Search code examples
datatablestabletools

jsdatatable TableTools buttons not working when used in dropdown menu collection

I am using TableTools for JS Datatable

    tableTools:
        sSwfPath: "/static/external/datatables/copy_csv_xls_pdf.swf"
        sRowSelect: 'multi'
        sSelectedClass: 'row_selected'
        bHeader: true
        aButtons: [
            {
                sExtends: 'collection',
                sButtonText: 'Tools <span class="caret" />',
                aButtons: [
                    {
                        sExtends: 'copy'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'xls',
                        sFileName: '*.xls',
                        mColumns: 'visible',
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'pdf'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'csv'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    'select_all',
                    'select_none'
                ]
            }
            'print',
        ]

It produces following dropdown menu: enter image description here

The menu items are not working expect selec/deselect. When I don't use collection and just display buttons in one row everything works perfectly fine.

How should one properly deine buttons when extending collection?

The produced HTML for dropdown looks like this:

<ul class="DTTT_dropdown dropdown-menu" style="display: block; position: absolute; left: 551.3125px; top: 553px; opacity: 1;">
   <li class=" DTTT_button_copy" id="ToolTables_agencies_1" tabindex="0" aria-controls="agencies">
      <a>Copy</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_1" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class=" DTTT_button_xls" id="ToolTables_agencies_2" tabindex="0" aria-controls="agencies">
      <a>Excel</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_2" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class=" DTTT_button_pdf" id="ToolTables_agencies_3" tabindex="0" aria-controls="agencies">
      <a>PDF</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_3" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class="DTTT_button_csv" id="ToolTables_agencies_4" tabindex="0" aria-controls="agencies">
      <a>CSV</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_4" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class="DTTT_button_text" id="ToolTables_agencies_5" tabindex="0" aria-controls="agencies"><a>Select all</a></li>
   <li class="DTTT_button_text disabled" id="ToolTables_agencies_6" tabindex="0" aria-controls="agencies"><a>Deselect all</a></li>
</ul>

additionally it creates div with background:

<div class="DTTT_collection_background" style="position: absolute; left: 0px; top: 0px; height: 936px; width: 1054px; opacity: 0.25;"></div>

in CSS I set z-index:

ul.DTTT_dropdown.dropdown-menu
    z-index: 9998
    &li
        z-index: 9999
Solution

  • The issue was wit wrong positioning of DIV's containing this small piece of flash which makes the magic.

    When you place DIV with position property set to absolute inside LI you have to quarantee, that LI's position is set to relative

    I make it works by this piece of CSS:

    .DTTT_button_copy, .DTTT_button_xls, .DTTT_button_pdf,.DTTT_button_csv {
    position: relative
}