[英]DataTables TableTools not working with two tables
我在同一页面中使用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。
有什么建议吗?
从我可以告诉你的问题是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问题。
希望有所帮助。
您的函数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);
}
});
}
注意你的表头是否已经是一个表,然后使用jqTable [1]甚至更好的jqTable.get(1)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.