jquery数据表子行在引导选项卡内不起作用

时间:2017-11-22 06:51:30

标签: datatables

我在引导选项卡中使用了两个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;
&#13;
&#13;

0 个答案:

没有答案