在 jQuery UI 对话框中使用 DataTables TableTools 时遇到问题答案

【问题标题】：Trouble using DataTables TableTools within a jQuery UI dialog在 jQuery UI 对话框中使用 DataTables TableTools 时遇到问题
【发布时间】：2011-10-07 02:55:07
【问题描述】：

我正在尝试在 jQuery UI 对话框中的表上使用 DataTables 'TableTools' 插件。它们在对话框之外工作正常，但在内部，唯一有效的按钮是打印。

这是一个 jsFiddle 演示问题： http://jsfiddle.net/Yd3PT/31/

有什么想法吗？

【问题讨论】：

标签： jquery datatables jquery-ui-dialog tabletools

【解决方案1】：

我遇到了同样的问题，上述解决方案对我不起作用。 TableTools 按钮出现在 DataTable 上（在模式中） - 但是当您单击链接时没有任何操作。

<!-- 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>

我的 TableTools 按钮列表似乎没有任何明显的变化，我认为 swf 文件需要在某个地方重新定义但不知道在哪里？

【讨论】：

【解决方案2】：

感谢 Obbi，但供将来参考（此线程更容易找到）。

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

“原来我看错了。JQuery UI 有一个错误，如果在模式中运行，由于其默认 z-index，它会从某些元素中删除点击功能。”

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

【讨论】：

哈哈。惊人的。谢谢！我后来放弃了，只是删除了 TableTools，所以我还没有测试过 - 但这看起来很有希望。

【解决方案3】：

接受的解决方案对我不起作用，但确实如此。

对话框打开后将表格工具附加到 div。

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

这将使按钮起作用。

除此之外，将复制确认窗口/弹出窗口的 z-index 设置为高。我说的是弹出的窗口，上面写着“10 Rows Copied”。这是控制该窗口/弹出窗口的类。

.DTTT_print_info {
    z-index:999;    
}

【讨论】：