DataTables TableTools不使用两个表

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

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

My main page has table and empty div for modal.

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

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

单独的详细信息页面有另一个表格,它在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.

这里第一个mainTable的TableTools工作正常,但对于第二个表它不工作(我可以点击按钮,但点击它不会创建xls文件)。我试图通过在这里建议的表创建后调用fnResizeButtons()来解决这个问题。但tableInstance为null。

Any suggestion?

3 个解决方案

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

从我可以告诉你的问题是TableTools(不是DataTable)没有处理模态中的表吗?

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:

我自己也遇到过类似的问题,当它被隐藏起来并且与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();
    }
});

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.

当然,您必须在shown.bs.modal上获取表实例,或者其他任何事件显示您的模态,但应该修复TableTools问题。

Hope that helps.

希望有所帮助。

#2

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

您的函数loadDetail()不会将响应加载到

中,因此第二个表不会被初始化。

Corrected loadDetail() function should look something like:

更正的loadDetail()函数应该类似于:

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

#3

watch out if you're table header is already a table, then use jqTable[1] or even better jqTable.get(1)

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

#1