DataTables TableTools not working with two tables

Question

I am using TableTools and DataTables v1.10 in same page.

My main page has table and empty div for modal.

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

Separate detail page has another table which get rendered in detailModal-content div.

<table id="detailTable">

</table>

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

Here first TableTools of mainTable is working fine but for second table it is not working (I can click button but clicking on it doesn't create xls file). I am trying to solve this by calling fnResizeButtons() after table created as suggested here . But tableInstance is null.

Any suggestion?

Answer 1

From what I can tell you're having problems with TableTools (not the DataTable) not working on the table which is in the modal?

I've had similar issues myself and it's down to the table being initialised when it's invisible and something to do with the Flash, it can be fixed and this is what I used to fix a similar issue with tables on different bootstrap tabs not having functional TableTools except on the table which was initially visible:

$('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();
    }
});

Of course, you'll have to grab the table instance on the shown.bs.modal or whatever other event shows your modal but that should fix the TableTools issue.

Hope that helps.

Answer 2

Your function loadDetail() doesn't load response into <div id="detailModal-content"></div> , therefore second table doesn't get initialized.

Corrected loadDetail() function should look something like:

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）