1

各タブの下に3つの異なるタブを表示する必要があるページがあり、jquery Datatableがあります。ただし、ページが最初にロードされると、すべてのデータテーブルが最初のページに表示されますが、後でタブをクリックすると同期されます。タブは、ブートストラップを使用して次のように記述されます。

<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関数については、コメントしてください。

他のすべてのタブで必要ですが、最初はすべてのデータテーブルが最初のタブに表示されます。

4

1 に答える 1

1

およびクラス.tab-paneがあるため、すべての要素がデフォルトで表示されます。.in.active

それらのクラスの 1 つ (たとえば、最初のクラス) を除いて、これらのクラスを削除してみてください。

<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>
于 2016-07-08T14:53:31.467 に答える