我在引导选项卡中使用了两个jquery数据表。现在,子行扩展(在响应中显示隐藏的td')在第二个选项卡中的第二个表上不起作用。并且它为第一个数据表工作。我的代码看起来像这样。 如何解决这个问题。请指导我解决这个问题。 在这里输入代码
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://datatables.net/download/build/dataTables.responsive.nightly.js?_=8ee4d33682e599380ce4dd5cdd6f1f86"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
$('#example2').DataTable( {
responsive: true
} );
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
} );
</script>
&#13;
<div class="container"><h1>Bootstrap tab panel example</h1></div>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
<a href="#1a" data-toggle="tab">Overview</a>
</li>
<li><a href="#2a" data-toggle="tab">Using nav-pills</a>
</li>
<li><a href="#3a" data-toggle="tab">Applying clearfix</a>
</li>
<li><a href="#4a" data-toggle="tab">Background color</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="2a">
<div>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
&#13;