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

Question

我在 2 个选项卡下有 2 个表格。默认选项卡下的表格显示了良好的数据表。第二个表由 Ajax 源（JSON 数组）填充。问题是我无法使用数据表初始化该表。

$(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() 调用的成功函数中显式初始化，则每次单击选项卡时我都会看到多个此类 DataTable。如何初始化这个数据表...

Answer 1

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

< strong>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;
    });

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