Question

我在2个标签下有2个表格。默认选项卡下的表格显示数据表正常。第二个表是从Ajax源（JSON数组）填充的。问题是我无法使用DataTables初始化此表。

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        if(activeTab == "#tab2"){   
        $.getJSON("<url>",              
            function(data) {
                    htmlTable = '<table id="table2" cellspacing="1" cellpadding="1" border="1">'; 
                                    htmlTable+=<data...>;
                    htmlTable +='</tbody></table>';
                        $('#table2').remove();
                        $('#tab2').append(htmlTable);
            });

        }

               $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

如果我在getJSON（）调用的success函数中显式初始化，我会在每次单击选项卡时看到多个这样的DataTable。如何初始化此dataTable ...

Answer 1

我有一些问题。当d $,getJSON()具有内置功能时，为什么使用ataTables？为什么要动态创建表格onclick？如果你只想点击第二个标签加载表格内容，那么制作一个静态表格并将dataTables初始化代码放在onclick tab2代码中

HTML

<div id="tab2" class="tab_content">
  <table class="display dataTable" id="table2">
    <thead>
      <tr>col1</tr>
       ....
    </thead> 
    <tbody>
    </tbody>
  </table>
</div>

<强>的jQuery

$("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); 
        if(activeTab == "#tab2"){          
           oTable2 = $('#table2').dataTable({
            "bProcessing": true,
                "sAjaxSource": "yourURL"
        }
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

如果内容的大小不是太大，我仍然认为您应该在页面加载时加载第二个表而不是单击第二个选项卡

不同选项卡下的多个数据表，一个具有Ajax源

1 个答案: