Angular 具有动态 headers 问题的嵌套数据表

Question

我在我的应用程序中使用 Angular DataTables 并尝试使用 dynamic headers 创建 nested datatables。

这是我的 Html 代码。

<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2"  dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
    <thead>
        <tr>
            <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
            <td ng-repeat="col in headerList2" ng-switch="col">
                <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                <span ng-switch-default>{{ client[col] }}</span>
            </td>
        </tr>
        <tr ng-show="showViewDetail">
           <div class="span12 pull-right" ng-show="showViewDetail">
               <table datatable="ng"  class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3"  dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
                  <thead>
                    <tr>
                      <th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                        <td ng-repeat="col3 in headerList3" ng-switch="col">
                            <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                            <span ng-switch-default>{{ client[col3] }}</span>
                        </td>
                    </tr>
                  </tbody>
               </table>
            </div>                            
        </tr>               
    </tbody>
</table>

这是javascript代码

  function makeDetailTable(data) {          
        var header = data[0],
        dtColumns = [];
        $scope.headerList2 = [];
        var i = 0;
        var key = "";
        //create columns based on first row in Parent Datatable
        for (var key in header) {

             dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
             $scope.headerList2.push(key);
            i = i + 1;


        }

        $scope.dtColumnDefs2 = dtColumns;           

        $scope.dtOptions2 = DTOptionsBuilder.newOptions()            
                            .withPaginationType('full_numbers')           
                            .withButtons([
                                'excel',
                                    {
                                        text: 'Reset',
                                        action: function (e, dt, node, config) {
                                            $("#dtInvoicingData2").DataTable().search("").draw();
                                        }
                                    }
                                ]);
    }

    $scope.btnViewDetails_Click = function (rowIndex) { 
        var detailList = $scope.lstInvoiceDetail[rowIndex]['lstDetail'];            
        var header3 = detailList[0],
        dtColumns3 = [];
        $scope.headerList3 = [];
        var i = 0;
        var key = "";
        //create columns based on first row in child datatable
        for (var key in header3) {

             dtColumns3.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
             $scope.headerList3.push(key);
            i = i + 1;


        }

        $scope.dtColumnDefs3 = dtColumns3;
        $scope.dtInstance2 = null;
        $scope.dtOptions3 = DTOptionsBuilder.newOptions()   
            .withPaginationType('full_numbers')
            .withButtons([
                'excel',
                    {
                        text: 'Reset',
                        action: function (e, dt, node, config) {
                            $("#dtInvoicingData3").DataTable().search("").draw();
                        }
                    }
                ]);

        $scope.showViewDetail = true;

当我尝试添加 child 数据表时它不起作用并显示控制台错误

TypeError: Cannot set property '_DT_CellIndex' of undefined

我确实搜索过这个错误，但我没有找到合适的解决方案

Here is a little info related to this error

它说问题是

Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.

更新：

现在我正在尝试这个。

 <table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2"  dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
                    <thead>
                        <tr>
                            <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                             <td ng-repeat="col in headerList2" ng-switch="col">

                                <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                                <span ng-switch-default>{{ client[col] }}</span>

                             </td>

                         </tr>
                         <tr>
                              <td colspan="3">
                              <table class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3"  dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
                                 <thead>
                                    <tr>
                                        <th ng-repeat="col3 in headerList3">{{col3 | translate}} </th>
                                    </tr>
                                </thead>
                                <tbody>
                                 <tr ng-repeat="(index,client) in lstChildInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                                     <td ng-repeat="col3 in headerList3" ng-switch="col">

                                        <!-- <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span> -->
                                        <span ng-switch-default>{{ client[col3] }}</span>

                                     </td>
                                 </tr>
                                </tbody>
                             </table>
                          </td> 
                           <td style="display:none;"> </td>
                          <td style="display:none;"></td>
                          </tr>     
                    </tbody>
                 </table>

Child Table 在第一行创建，我想在每一行创建。

你有什么想法吗？

Answer 1

因为您正在尝试创建具有不同结构的两行而不是嵌套表。

第 1 行：

<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
        <td ng-repeat="col in headerList2" ng-switch="col">
            <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
            <span ng-switch-default>{{ client[col] }}</span>
        </td>
    </tr>

第 2 行：

<tr ng-show="showViewDetail">
       <div class="span12 pull-right" ng-show="showViewDetail">
           <table datatable="ng"  class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3"  dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
              <thead>
                <tr>
                  <th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                    <td ng-repeat="col3 in headerList3" ng-switch="col">
                        <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                        <span ng-switch-default>{{ client[col3] }}</span>
                    </td>
                </tr>
              </tbody>
           </table>
        </div>                            
    </tr>

就错误状态而言，两行中的数据对 header 和列的计数不同。这意味着您的列表 dtColumnDefs2、headerList2、dtColumnDefs3 和 headerList3 具有不同的计数。

Angular 具有动态 headers 问题的嵌套数据表

Angular nested Data Tables with dynamic headers issue

angularjs

angular-datatables