将 DataTables 与 colspan 一起使用时无法读取未定义的属性“mData”

Posted 2023-05-07

技术标签:

【中文标题】将 DataTables 与 colspan 一起使用时无法读取未定义的属性“mData”【英文标题】：Cannot read property 'mData' of undefined when using DataTables with colspan 【发布时间】：2016-08-09 15:48:19 【问题描述】：

我正在使用数据表来显示来自服务器的数据。问题是我在控制台中不断收到错误消息：

datatables.min.js:145 Uncaught TypeError: Cannot read property 'mData' of undefined

我已经访问了互联网上与此相关的每个链接，但对我没有任何帮助。

我已使用 colspans 确保 thead 和 tbody 中的列数相同。

我可能遗漏了一些东西，但在花费了相当长的时间后，我希望能得到一些帮助。

代码如下所示

html：

<table id="data-table" class="display table" >
  <thead>
    <tr>
      <th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;">
        Tier 2 Contributions Report
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px">
        Employer's FIle No/Registration No:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getSSNITRegistration() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Name of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getName() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Address of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getAddress() || '-' %>
      </th>
    </tr>


    <tr>
      <th colspan="4" style="border-bottom: none;"></th>
    </tr>
  </thead>

  <tfoot>
   <tr>
     <th colspan="2" class="left-align">Totals</th>
     <th class="center-align"><%= addCommas(totals.basicSalary) %></th>
     <th class="right-align"><%= addCommas(totals.contribution) %></th>
   </tr>
  </tfoot>

  <tbody>
    <tr>
      <th class="left-align">Social Sec. No.</th>
      <th class="left-align">Full Name</th>
      <th class="center-align">Basic Salary</th>
      <th class="right-align">Contribution (5%)</th>
    </tr>

    <% employees.forEach(function(employee)  %>
      <tr>
        <td class="left-align"><%= employee.ssnitNumber %></td>
        <td class="left-align"><%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%></td>
        <td class="center-align"><%= addCommas(employee.basicSalary) %></td>
        <td class="right-align"><%= addCommas(employee.contribution) %></td>
      </tr>
    <% ) %>
  </tbody>
</table>

$('#data-table').DataTable( 
  "bPaginate": true,
  "bLengthChange": true,
  "bFilter": true,
  "bSort": false,
  "bInfo": true,
  "bAutoWidth": false,
  "dom": 'Bfrtip',
  "buttons": [
    'copy', 'csv', 'excel', 'pdf', 'print'
  ]

);

【问题讨论】：

您是否检查过表的重复 ID，因为在我的情况下它导致了同样的问题.. 是的，我刚刚又查了一下，好像不是这个原因。可能是 colspan 的事情。请将页眉（如社交安全号码等）从移动到，并且您的页眉和页脚不匹配请使它们与我看到的页眉中有 4 个元素相同并且只有 3 页脚。页脚有一个 colspan="2" 的元素，这样可以弥补缺失的部分。我按照您的建议将这些东西移到了thead并且它起作用了。奇怪的！我仍然不知道为什么。不过谢谢还有一件事，当我使用导出到 excel 工具时，它不会捕获第一个标题。你以前用过那个工具吗？ 【参考方案1】：

此类问题的一般原因是

页眉列和页脚列不匹配。

正文元素与标题不匹配（一行中的td数应与标题中的<th>匹配）。

表 ID 重复。

在您的情况下，请将标题（如社交安全号等）从 <tbody> 移动到 <thead>，并且您的页眉和页脚不匹配请使它们相同，因为我看到页眉中有 4 个元素，并且只有3 在页脚。

【讨论】：

【参考方案2】：

也有这个错误，在我的情况下是由列标题与正文中的列数量不匹配引起的。

【讨论】：

【参考方案3】：

我的团队遇到了类似的问题，我们能够通过从 <th> 和 <td> 标记中删除所有 colspan、样式和类属性来解决。

因此，作为起点，我建议删除这些属性。此外，我认为您的 tfoot 标签也可能会导致一些问题。最好先去掉再看看。