angularjs - 具有动态标题问题的角度嵌套数据表

Question

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

这是我的 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;

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

TypeError：无法设置未定义的属性“_DT_CellIndex”

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

这是与此错误相关的一些信息

它说问题是

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>   

子表是在第一行创建的，我想在每一行上创建。

你有什么想法吗？

标签： angularjsangular-datatables

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>    

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