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?
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?
Credit to Obbi, but for future references (this thread was easier to find).
"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 });
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;
}
