jQuery数据表子行在引导选项卡中不起作用

Question

我正在引导选项卡中使用两个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> 

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