Таблицы данных 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 дел.

<table id="detailTable"> 

</table> 

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

Вот первый TableTools из mainTable работает нормально, но для второй таблицы он не работает (я могу нажать кнопку, но нажав на нее не создает файл XLS). Я пытаюсь решить это, позвонив fnResizeButtons() после создания таблицы, как предложено here. Но 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)