我在应用程序中使用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'
我确实搜索了此错误，但是找不到合适的解决方案
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>
子表在第一行上创建，我想在每一行上创建。
您对此有任何想法吗？
答案 0 :(得分：0)
因为您尝试创建具有不同结构的两行而不是嵌套表。
第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具有不同的计数。