Bootstrap jquery选项卡加载ajax表中断选项卡

Question

我在HTML内使用bootstrap Tabs有以下modal：

<ul class="nav nav-tabs navtab-bg nav-justified">
   <li class="active">
      <a href="#details-tab" data-toggle="tab" aria-expanded="false">
      <span class="visible-xs"><i class="fa fa-home"></i></span>
      <span class="hidden-xs">Details</span>
      </a>
   </li>
   <li>
      <a href="#employee-tab" data-toggle="tab" aria-expanded="true">
      <span class="visible-xs"><i class="fa fa-user"></i></span>
      <span class="hidden-xs">Employees</span>
      </a>
   </li>
</ul>
<div class="tab-content" style="overflow-y: auto;height:500px;">
   <div class="tab-pane active" id="details-tab">
      <div class="panel-body">
         <div class="col-md-6">
            <div class="form-horizontal" role="form">
               <div class="form-group">
                  <label class="col-md-3 control-label">Phone Number</label>
                  <div class="col-md-9">
                     <input type="text" required class="form-control" name="CompanyName" value="">
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-md-3 control-label" for="example-email">Type</label>
                  <div class="col-md-9">
                     <select class="form-control" id="EmployeeName" name="EmployeeName">
                        <option value="">Type</option>
                     </select>
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-md-3 control-label">First Name</label>
                  <div class="col-md-9">
                     <input type="text" class="form-control" name="" value="">
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-md-3 control-label">Last Name</label>
                  <div class="col-md-9">
                     <input type="text" required class="form-control" name="Address" value="">
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-md-3 control-label">Personal ID</label>
                  <div class="col-md-9">
                     <input type="text" class="form-control" name="Address2" value="">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-6">
         </div>
      </div>
      <!-- panel-body -->
   </div>
   <div class="tab-pane active" id="employee-tab">
      <table id="employee-table" class="table table-striped table-bordered dt-responsive" style="display:none;" cellspacing="0" width="100%">
         <thead>
            <tr>
               <th>Employee Name</th>
               <th>View</th>
               <th>Edit</th>
               <th>Block</th>
            </tr>
         </thead>
      </table>
   </div>
</div>

Unders标签employee-tab我有一个名为employee-table的表格，我使用jquery Datatable从服务器加载表格。

这是我的代码：

// load employee table 
$this.loadEmployeesTable('employee-table', '');

// here I make visible the table
$('#employee-table').show();

问题是直观的，因为当显示模态时，表格会在第一个标签中呈现，当我点击第二个标签时，它似乎是固定的，如果我返回第一个表格，那么表格就会消失。

当您将动态元素加载到选项卡面板时，它们会以某种方式正常工作。

  

有任何线索吗？