3 Datatables на 3 разных вкладках соответственно, показывает на первой вкладке, когда нагрузка позже после нажатия на вкладки упорядочивается. Как его решить?

Question

У меня есть страница, где я должен показать 3 разных вкладки под каждой вкладкой, есть jquery Datatable. Но при загрузке страницы на первых всех DataTables прийти на первой странице, но позже при нажатии на закладках она синхронизируется вкладки записываются следующим образом с использованием начальной загрузки:

<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 элементы показаны по умолчанию, потому что у них есть классы .

Попробуйте удалить thoses классы для одного из них, за исключением (первый, например):

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