jquery ajax选项卡和tabletools

时间:2015-02-12 20:23:31

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

我正在使用带有DataTables 1.9.4的jquery 1.7.2和TableTools 2.2.1

我遇到了一起使用jquery选项卡和tabletools的问题。我的一些标签是通过ajax调用加载的,一些标签内容位于页面本身,其中标签已初始化。

但是当我点击Tabletool按钮时,我无法保存为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)确实出现了,但是当我点击了particalr标签时我没有明确地调用它(并且我在这个标签上有数据表),下面的代码片段:

$("#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 个答案:

答案 0 :(得分:0)

使用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();