3个数据表分别在3个不同的选项卡上，点击选项卡后加载时显示在第一个选项卡上。如何解决？

Question

我有一个页面，我必须在每个选项卡下显示 3 个不同的选项卡，还有一个 jquery 数据表。但是，当页面首先加载时，所有数据表都出现在第一页上，但稍后单击选项卡时，它会同步选项卡使用 bootstrap 编写如下：

<div class="panel-body">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab" >Tab1</a></li>
            <li><a href="#tab2" data-toggle="tab" >Tab2</a></li>
            <li><a href="#tab3" data-toggle="tab" >Tab3</a></li>
            <li><a href="#tab4" data-toggle="tab" >Tab4</a></li>
        </ul>

        <div class="tab-content">
            <div id="tab1" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table1" class="display">

                    </table>
                </div>
            </div>
            <div id="tab2" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table2" class="display">

                    </table>
                </div>
            </div>
            <div id="tab3" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table3" class="display">

                   </table>
                </div>
            </div>
             <div id="tab4" class="tab-pane fade in active">
                <div class="row row-border">
                </div>
            </div>
      </div>
</div>

javascripts 调用是这样的：

<script>
    window.onload = retrieveList;

    function retrieveList() {
        var table = document.getElementById("Table1");

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable1",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess
        });
        var table1 = document.getElementById("Table2");

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable2",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess1
        });
        var table2 = document.getElementById("Table3");

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable3",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess2
        });
    };
</script>

以及我认为您不需要的 OnSuccess 函数，如果需要请发表评论。

请帮助我，最初所有数据表都在第一个选项卡上，但我需要在所有其他选项卡上。

Answer 1

默认显示所有 .tab-pane 元素，因为它们具有 .in 和 .active 类.

尝试删除那些类除了其中一个（例如第一个）：

<div class="panel-body">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab" >Tab1</a></li>
        <li><a href="#tab2" data-toggle="tab" >Tab2</a></li>
        <li><a href="#tab3" data-toggle="tab" >Tab3</a></li>
        <li><a href="#tab4" data-toggle="tab" >Tab4</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            <div class="row row-border">
                <table id="Table1" class="display">

                </table>
            </div>
        </div>
        <div id="tab2" class="tab-pane fade">
            <div class="row row-border">
                <table id="Table2" class="display">

                </table>
            </div>
        </div>
        <div id="tab3" class="tab-pane fade">
            <div class="row row-border">
                <table id="Table3" class="display">

                </table>
            </div>
        </div>
        <div id="tab4" class="tab-pane fade">
            <div class="row row-border">
            </div>
        </div>
    </div>
</div>

3个数据表分别在3个不同的选项卡上，点击选项卡后加载时显示在第一个选项卡上。如何解决？

3 Datatables on 3 different tabs respectively, shows on the first tab when on load later after clicking on tabs gets arranged. How to Resolve it?

javascript

ajax

datatable

bootstrap-tabs