jquery ajax 选项卡和表格工具答案

【问题标题】：jquery ajax tabs and tabletoolsjquery ajax 选项卡和表格工具
【发布时间】：2015-04-13 18:07:30
【问题描述】：

我将 jquery 1.7.2 和 TableTools 2.2.1 与 DataTables 1.9.4 一起使用

我有一个 jquery 选项卡和 tabletools 一起使用的问题。我的一些选项卡是通过 ajax 调用加载的，而一些选项卡内容位于已初始化选项卡的页面本身上。

但是当我点击表格工具按钮时，我无法保存为 CSV/PDF。

它在第一个选项卡上工作正常，它是 ajax 加载的，但不适用于页面其他选项卡上的选项卡内容。

我使用以下代码调整按钮大小但没有结果，它仅在我没有加载 ajax 选项卡时才有效。

$("#tabs").tabs({ 
    show: function(ui, event) { 
        var ttInstances = TableTools.fnGetMasters(); 
        for (i in ttInstances) { 
            alert(i); 
            if (ttInstances[i].fnResizeRequired())
                ttInstances[i].fnResizeButtons(); 
        }
    } 
});

另外，我观察到alert(i) 确实在页面加载时出现，但当我在单击该特定选项卡时显式调用它时没有出现（并且我在此选项卡上有数据表），下面的代码 sn-p ：

$("#tabs").tabs({ 
    select: function(event,ui) { 
        alert("tab no :"+ui.panel.id); 
        switch (ui.panel.id) { 
            case "tab_started": 
                alert("hi here"); 
                var ttInstances = TableTools.fnGetMasters(); 
                for (i in ttInstances) { 
                    alert(i); 
                    if (ttInstances[i].fnResizeRequired())
                        ttInstances[i].fnResizeButtons(); 
                }
        } 
});

非常感谢任何帮助。请提出解决此问题的任何建议。我确实检查了以前的帖子，但找不到确切的解决方案

【问题讨论】：

标签： jquery jquery-ui datatables jquery-tabs tabletools

【解决方案1】：

任何使用 Javascript 进行初始化的东西。您需要在调用 AJAX 的同一页面上调用初始化。您想要这样做的原因是您加载 DOM，然后将任何 Javascript 应用到它们。

主页

<div class='container'></div>

$.post(link, function (html) {
    $('.container').html(html)
})

AJAX 页面

<table class='datatable'>data</table>

/*Init datatable on ajax page.*/
$('.datatable').Datatable();

【讨论】：