第二次单击“第一数据表”行将隐藏第二数据表的表头

Question

我有两个数据表。在单击第一个DataTable td时，我已经加载了第二个DataTable。 第二次单击第一个DataTable的td时，不会加载第二个DataTable的标题。

数据表1

<table id="" class="display table table-striped table-bordered dt- 
responsive nowrap" style="width:100%" >
    <thead>           
        <tr>
        <th data-ng-repeat="(key, data) in dynamicContent.content[0]"> 
        {{key}}</th>
    </tr>
    </thead>

    <tbody>
       <tr data-ng-repeat="dataT in dynamicContent.content">
   <td data-ng-repeat="(key, data) in dataT" data-ng- 
        click="getfxdetailsbybranch(dataT)">{{data}}</td>
</tr>
    </tbody>
</table>

数据表2

 <table id="" class="display1 table table-striped table-bordered dt-responsive nowrap" style="width:100%" >
    <thead>
        <tr>
            <th data-ng-repeat="(key, data) in dashboardfxdetails.content[0]">{{key}}</th>
        </tr>
    </thead>
    <tbody>
       <tr data-ng-repeat="dataT in dashboardfxdetails.content">
           <td data-ng-repeat="(key, data) in dataT">{{data}}</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
 $(document).ready(function() {
    $('').DataTable();
 });
</script> 

控制器层

1. 调用API并返回数据的服务层。

2. 代码：-

   fxUnassignedService
           .getunassignedFx($scope.fxdetails)
                   .then(
                           function(response) {
                               $scope.dynamicDataWithDetails = [];
   
   
   if($scope.dashboardfxdetails.headers.length>0)
                                   {
   
   $("table.display1").DataTable().destroy(true);
                                   }
   $scope.dashboardfxdetails = response.data.data;
   
   setTimeout(function() {$('table.display1').DataTable();}, 300);});
   

结果

第二次单击隐藏第二个数据表的表头