引导jquery选项卡加载ajax表中断选项卡

我在

模式

中使用

引导

选项卡

实现了以下

HTML

：

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

这个问题是可见的，因为当显示模式时，表在第一个选项卡中呈现，当我单击第二个选项卡时，它似乎是固定的，如果我返回第一个表，那么表就消失了

当您将动态元素加载到选项卡面板中时，这些选项卡面板无法正常工作

有线索吗

---

那么，如何将数据加载到DataTable中呢？你是按照自己的方式做还是按照自己的方式重新创造？另外，最好看看

loadEmployeesTable

does如何将数据加载到DataTable中？你是按照自己的方式做还是按照自己的方式重新创造？另外，最好看看

loadEmployeesTable

做了什么

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

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