Trouble using DataTables TableTools within a jQuery UI dialog

Question

I'm trying to use the DataTables 'TableTools' plugin on a table within a jQuery UI dialog. They work fine outside the dialog, but inside, the only button that works is Print.

Here's a jsFiddle demo'ing the problem: http://jsfiddle.net/Yd3PT/31/

Any ideas?

Answer 1

Credit to Obbi, but for future references (this thread was easier to find).

http://datatables.net/forums/discussion/9480/tabletools-export-buttons-do-nothing-in-ie-or-chrome-in-jquery-ui-modal-updated-fixed/p1

"Turns out I was looking at it all wrong. JQuery UI has a bug where if ran in a modal, it removes the click functions from certain elements due to its default z-index."

i.e. $("#datatableDiv").dialog({ height: 500, width: 1000, modal: true, zIndex: 1 });

Answer 2

I'm having the same issue and the above solution did not work for me. The TableTools buttons appear on the DataTable (in the modal) - however there is no action for when you click the links.

<!-- source modal -->
<div id="source-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="source-modalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  <div class="modal-body">
    <table id="source-modal-table" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Heading1</th>
          <th>Heading2</th>
          <th>Heading3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="data1"></td>
          <td class="data2"></td>
          <td class="data3"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div><!-- source modal -->

<script>
  // defines DataTable and TableTool with swf
  var oTable2 = $('#source-modal-table').DataTable({
    "aoColumns": [
       null, null, null, null, null, null 
    ],
    "sDom": 'T<"clear">lfrtip',
    "oTableTools": {
      "sSwfPath": "/Assets/images/copy_csv_xls_pdf.swf"
    }
  });    

  // open modal for source
  $("#source-modal").modal('show');

  // ensures TableTools works in modal (DOES NOT WORK)
  $('#source-modal').dialog({
    modal: true,
    zIndex: 1
  });
</script>

There doesn't seem to be any apparent change to my TableTools button list, I think that the swf file needs to be redefined somewhere but don't know where?

Answer 3

The accepted solution didn't work for me, but this did.

Append the tabletools to a div after the dialog opens.

$("#dialog1").dialog({
    open: function() { 
        $( tableTools.fnContainer() ).appendTo('#tableToolsDiv');       
    }
});

That will make the buttons work.

In addition to that, set the z-index of the copy confirmation window/popup high. I'm talking about the window that pops up that says "10 Rows Copied". Here's the class that controls that window/popup.

.DTTT_print_info {
    z-index:999;    
}