Question

大家好，我想通过Jquery datable导出表。我将在mvc foreach循环中创建此表。之后，我正在使用jquery数据表导出我的数据表，但是此代码给出了错误"Cannot set property '_DT_CellIndex' of undefined"。

<tr style="width:100%; background-color:#d08702">
    <td style="font-weight:600;color:white;text-align:center">Verified Data</td>
</tr>

下面，我分享了完整的代码。请帮助我解决此问题。

这是与该表相关的完整代码

HTML表格

<div id="gridContent2" class="table-responsive">
    <table class="table-bordered w-100" id="tableValidationReport">
        <thead>
            <tr class="webgrid-header">
                <th scope="col" colspan="2">
                </th>
                <th scope="col" colspan="2">Group 1</th>
                <th scope="col" colspan="2">Group 2</th>
            </tr>
            <tr class="webgrid-header-inner">
                <th scope="col">
                    Name
                </th>
                <th scope="col">
                    Code
                </th>
                <th scope="col">
                    Total
                </th>
                <th scope="col">
                    Total1
                </th>
                <th scope="col">
                    SalesTotal
                </th>
            </tr>
        </thead>
        <tbody>
            @{
                var ClearData = ViewBag.ClearData as List<TestDTO>;
                var NonClearData = ViewBag.NonClearData as List<TestDTO>;
                var dataAvailable = false;
            }
            @{var index = 0;}



            @if (ClearData != null && ClearData.Count > 0)
            {
                dataAvailable = dataAvailable || true;
                <tr style="width:100%; background-color:#d08702">
                    <td style="font-weight:600;color:white;text-align:center">Verified Data</td>
                </tr>
                foreach (var item in ClearData)
                {
                    <tr class="@(index % 2 == 0 ? "webgrid-row-style" : "webgrid-alternating-row")" style="@(String.IsNullOrEmpty(item.Name) ? "background-color:#CCCCCC" : "")">
                        <td class="col2Width">  <span class="display-mode"> <label id="lblAgentsCount">@item.Name</label> </span> </td>
                        <td class="col2Width">  <span class="display-mode"> <label id="lblAgentsCount">@item.Code</label> </span> </td>
                        <td class="col2Width"> <span class="display-mode"> <label id="lblAppointmentTotal">@item.Total</label> </span>  </td>
                        <td class="col2Width"> <span class="display-mode"> <label id="lblPresentationTotal">@item.Total1</label> </span>  </td>
                        <td class="col2Width"> <span class="display-mode"> <label id="lblSalesTotal">@item.SalesTotal</label> </span>  </td>
                    </tr>
                    index++;
                }
            }


            @if (NonClearData != null && NonClearData.Count > 0)
            {
                dataAvailable = dataAvailable || true;
                {
                    <tr style="width:100%; background-color:#d08702">
                        <td style="font-weight:600;color:white;text-align:center">Non Verified Data</td>
                    </tr>
                    foreach (var item in NonClearData)
                    {
                        <tr class="@(index % 2 == 0 ? "webgrid-row-style" : "webgrid-alternating-row")" style="@(String.IsNullOrEmpty(item.Name) ? "background-color:#CCCCCC" : "")">
                            <td class="col2Width">  <span class="display-mode"> <label id="lblAgentsCount">@item.Name</label> </span> </td>
                            <td class="col2Width">  <span class="display-mode"> <label id="lblAgentsCount">@item.Code</label> </span> </td>
                            <td class="col2Width"> <span class="display-mode"> <label id="lblAppointmentTotal">@item.Total</label> </span>  </td>
                            <td class="col2Width"> <span class="display-mode"> <label id="lblPresentationTotal">@item.Total1</label> </span>  </td>
                            <td class="col2Width"> <span class="display-mode"> <label id="lblSalesTotal">@item.SalesTotal</label> </span>  </td>
                        </tr>
                        index++;
                    }
                }
            }


            @if (!dataAvailable)
            {
                <tr><td colspan="21">No Data Found</td></tr>
            }
        </tbody>
    </table>
</div>

原始代码

<script>
    $(document).ready(function () {
        debugger;

        var table = $('#tableValidationReport').DataTable({
            dom: 'Bfrtip',
            buttons: [
              {
                  extend: 'collection',
                  text: 'Export',
                  buttons: ['pdfHtml5', 'csvHtml5', 'copyHtml5', 'excelHtml5']
              }
            ]
        });
    });
</script>

Answer 1

查看此DataTables论坛帖子=> https://datatables.net/forums/discussion/32575/uncaught-typeerror-cannot-set-property-dt-cellindex-of-undefined#Comment_100647

alpha可以在colspan单元格中使用，但不能在thead中使用它。 tbody的每一行必须具有与标题中各列的总跨度指定的相同的表单元格数。要使插件正常运行，您需要在“已验证”和“未验证”行中进行以下操作：

tbody

Answer 2

colspan的总和是2 + 2 + 2 = 6和$（“。webgrid-header-inner> th”）。length == 5

将表导出到数据表“无法设置未定义的属性'_DT_CellIndex'”

2 个答案: