我使用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-contentdiv中呈现。
<table id="detailTable">
</table>
<script>
$(document).ready(function () {
var mainDetailTable = $jq11('#detailTable').DataTable({
"dom": 'T<"clear">ltipr',
"tableTools": { ... },
..............
});
});
</script>
这里先TableTools的mainTable工作正常，但第二个表是不工作（我可以点击按钮，但点击它不会产生xls文件）。我试图通过调用这里fnResizeButtons()建议的表后解决此问题。但是tableInstance为空。
有什么建议吗？
从我可以看出来，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问题。
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句