DataTables TableTools 不适用于两个表

Question

我在同一页面中使用 TableTools 和 DataTables v1.10。

我的主页有 table 和空的 div 模式。

<div id="resultDiv">
  <table id="mainTable"> ... </table>
  <div id="detailModal">
    <div id="detailModal-content"></div>
  </div>
</div>

<script>
$(document).ready(function () {
  var mainTable = $('#mainTable').DataTable({
    "dom": 'T<"clear">lrtip',
    "tableTools": { ... },
    "columns": [
      {
        "data": null,
        "render": function(data, type, row, meta) {
          return '<a href="" onClick="return loadDetail(' + data.id + ')">Details</a>';
        }
      },
      ....
    ],
    ........
  });
});

function loadDetail(id) {
  $.ajax({
    async: false,
    url: ...,
    success: function(respose) {
      var tableInstance = TableTools.fnGetInstance('detailTable');
      console.log(tableInstance); //null
    }
  });      
}
</script>

单独的详细信息页面有另一个 table，它在 detailModal-content div 中呈现。

<table id="detailTable">

</table>

<script>
$(document).ready(function () {
  var mainDetailTable = $jq11('#detailTable').DataTable({
    "dom": 'T<"clear">ltipr',
    "tableTools": { ... },
    ..............
  });
});
</script>

mainTable 的第一个 TableTools 工作正常，但第二个 table 不工作（我可以单击按钮，但单击它不会创建 xls 文件）。我试图通过在按照建议 here 创建 table 之后调用 fnResizeButtons() 来解决这个问题。但是 tableInstance 为空。

有什么建议吗？

Answer 1

您的函数 loadDetail() 没有将响应加载到 <div id="detailModal-content"></div>，因此第二个 table 没有被初始化。

更正后的 loadDetail() 函数应如下所示：

function loadDetail(id) {
   $.ajax({
      async: false,
      url: '/script.php',
      data: { 'id' : id },
      success: function(response){
         $('#detailModal-content').html(response);
      }
  });
}

Answer 2

据我所知，您遇到了 TableTools（不是 DataTable）无法在模式中的 table 上工作的问题？

我自己也遇到过类似的问题，归结为 table 在不可见时被初始化，与 Flash 有关，它可以修复，这就是我用来修复类似问题的方法table 在不同的 bootstrap 选项卡上没有功能性的 TableTools 除了 table 最初是可见的：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target_id = $(e.target).attr("href");
    var jqTable = $(target_id).find("table");
    var oTableTools = TableTools.fnGetInstance( jqTable[0] );
    if (oTableTools != null && oTableTools.fnResizeRequired()){
        /* A resize of TableTools' buttons and DataTables' columns is only required on the
         * first visible draw of the table
         */
        jqTable.dataTable().fnAdjustColumnSizing();
        oTableTools.fnResizeButtons();
    }
});

当然，您必须获取 shown.bs.modal 上的 table 实例或显示您的模式的任何其他事件，但这应该可以解决 TableTools 问题。

希望对您有所帮助。

Answer 3

注意你是否 table header 已经是 table, 然后使用 jqTable[1] 甚至更好的 jqTable.get(1)

DataTables TableTools 不适用于两个表

DataTables TableTools not working with two tables

html

javascript

jquery

datatables

jquery-datatables