DataTables TableTools不使用兩個表

Question

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

我的主頁有表格和模態的空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>

單獨的詳細信息頁面有另一個表格，它在detailModal-content div中呈現。

<table id="detailTable">

</table>

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

這里第一個TableTools的mainTable工作正常，但對於第二個表它不工作（我可以點擊按鈕，但點擊它不會創建xls文件）。 我試圖通過在這里建議的表創建后調用fnResizeButtons()來解決這個問題 。 但tableInstance為null。

有什么建議嗎？

Answer 1

從我可以告訴你的問題是TableTools（不是DataTable）沒有處理模態中的表嗎？

我自己也遇到過類似的問題，當它被隱藏起來並且與Flash有關時，它會被初始化，它可以修復，這就是我用來解決類似問題的不同引導選項卡上沒有功能的表TableTools除了最初可見的表格外：

$('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上獲取表實例，或者其他任何事件顯示您的模態，但應該修復TableTools問題。

希望有所幫助。

Answer 2

您的函數loadDetail()不會將響應加載到<div id="detailModal-content"></div> ，因此第二個表不會被初始化。

更正的loadDetail()函數應該類似於：

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

Answer 3

注意你的表頭是否已經是一個表，然后使用jqTable [1]甚至更好的jqTable.get（1）