jquery ajax 选项卡和表格工具

Posted 2023-05-09

【中文标题】jquery ajax 选项卡和表格工具

【英文标题】：jquery ajax tabs and tabletools

【发布时间】：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(); 
                
         
);

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

【参考方案1】：

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

主页

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

js

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

AJAX 页面

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

js

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