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?

Question

I have a page where i have to show 3 different tabs under each tab there is a jquery Datatable. But when the page loads at first all the Datatables come on the first page but later when clicked on the tabs it get synchronized the tabs are written as follows using 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>

and the javascripts calls are like this:

<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>

and later the OnSuccess Functions that i don't think you require if required please do comment.

Please Help me out initially all the datatable come on the first tab though i require it on all others tabs.

Answer 1

All your .tab-pane elements are shown by default because they have have the .in and .active classes.

Try removing thoses classes except for one of them (the first one, for example) :

<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>