Question

我的页面上有4个标签。我的问题是，在页面加载后第一次从后向单击该选项卡时（第四个选项卡到第一个选项卡），第四个选项卡的内容会附加所有其他选项卡的内容。

此问题归因于数据表。我该怎么解决？

我已经在XAMPP Server中使用PHP版本5和MYSQL进行了尝试。

<?php include 'include/sidebar.php';
?>

<div class="pagecontent">
<div class="row">
<div class="col-sm-6">
<h3 class="pageheading">Quotation</h3>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<ul class="breadcrumb">
<li><a href="dashboard.php">Home</a></li>
<li>Quotation</li>
</ul>
</div>
</div>

<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active " id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Quotation List</a>
<a class="nav-item nav-link btnmargine" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">+ Add New Quotation  </a>
<a class="nav-item nav-link btnmargine" id="nav-mail-tab" data-toggle="tab" href="#nav-mail" role="tab" aria-controls="nav-mail" aria-selected="true">Mail</a>
<a class="nav-item nav-link btnmargine" id="nav-force_list-tab" data-toggle="tab" href="#nav-force_list" role="tab" aria-controls="nav-force_list" aria-selected="true"> Force Closed </a>
</div>
</nav>

<div class="tab-content col-sm-12 container" id="nav-tabContent">

<div class="tab-pane fade eformpad " id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
form
</div>





<div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
list


  <table id="example" class="table table-striped table-bordered table-responsive" style="width:100%">

  <thead>
    <tr>    
      <th>Select</th> 
      <th>SL No</th>
      <th>Quotation No</th>
      <th>Type</th>
      <th>Company Name</th> 
      <th>Contact Name</th>
      <th>Mobile No</th> 
      <th>Amount</th>
      <th>GST Amount</th>
      <th>Total</th>
      <th>Status</th> 
      <th>Created Date</th>
      <th>Attachement</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>List1</td>
      <td>List2</td>
      <td>List3</td>
      <td>List4</td>
      <td>List5</td>
      <td>List6</td>
      <td>List7</td>
      <td>List8</td>
      <td>List9</td>
      <td>List10</td>
      <td>List11</td>
      <td>List12</td>
      <td>List13</td>
      <td>List14</td>
    </tr>

</tbody>
</table>
</div>

<div class="tab-pane fade eformpad" id="nav-mail" role="tabpanel" aria-labelledby="nav-mail-tab">
 mail

  <table id="example2" class="table table-striped table-bordered table-responsive" style="width:100%">
     <thead>
      <tr>    
        <th>SL No</th>
        <th>Quotation No</th> 
        <th>Company Name</th> 
        <th>Contact Name</th>
        <th>Mobile No</th>   
        <th>Email Id</th>   
        <th>Sent At</th>
        <th>Attachment</th>
      </tr>
    </thead>
    <tbody>


            <tr>
              <td>aa</td>
              <td>aa</td>
              <td>aa</td>
              <td>aa</td>
              <td>aa</td>
              <td>aa</td>
              <td>aaa</td>
              <td>aa</td>
            </tr>


    </tbody>
  </table>
</div>

<div class="tab-pane fade eformpad" id="nav-force_list" role="tabpanel" aria-labelledby="nav-force_list-tab">
  force close
</div>


</div>
</div>

</div>
</div>

<?php include 'include/footer.php' ?>
<script>
  $(document).ready(function() {
   $('#example').DataTable();
  });
</script>

如果我注释DataTable（）函数，它将正常工作。但是我需要列出数据表。

我希望数据表概念可以与引导程序选项卡[4个选项卡]一起使用。我不希望第四个标签内容与其他所有标签附加在一起。

在引导程序中使用四个选项卡时，如何修复一个选项卡下另一个选项卡下的内容

0 个答案: