3

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

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

有任何想法吗？

4

3 回答 3

3

我遇到了同样的问题，上面的解决方案对我不起作用。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 文件需要在某个地方重新定义但不知道在哪里？

于 2014-03-06T17:10:50.047 回答
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 });

于 2013-02-20T15:07:42.207 回答
0

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

对话框打开后将 tabletools 附加到 div。

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

这将使按钮工作。

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

.DTTT_print_info {
    z-index:999;    
}
于 2015-06-19T20:08:29.243 回答