在colspan中使用DataTables时，无法读取未定义的属性'mData' [英] Cannot read property 'mData' of undefined when using DataTables with colspan

问题描述

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

I'm using datatables to display data from the server. Problem is I keep getting an error in the console saying:

datatables.min.js:145未捕获的TypeError:无法读取未定义的属性'mData'

我实际上访问了互联网上与之相关的每个链接，但没有任何帮助.

I have visited literally every link on the internet the relates to this, but nothing's worked for me.

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

I have made sure the number of columns are the same in both thead and tbody using colspans.

我可能会丢失一些东西，但是花了一些时间之后，我希望在这里有所帮助.

I'm probably missing something, but after spending quite some time on it, I'd appreciate some help here.

这是代码的样子

HTML:

<table id="data-table" class="display table" width="100%">
  <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>

JS

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

});

推荐答案

此类问题的一般原因是

1. 页眉列和页脚列不匹配.

1. Mismatch between header column and footer columns.

正文元素与标头不匹配(一行中的td数应与标头中的< th> 匹配).

Body elements do not match with header(Number of td in one row should match with <th> in header).

表ID的重复.

在您的情况下，请将标头(例如，社交编号等)从< tbody> 移至< thead> ，而且标头和页脚也不要匹配，请使它们相同，因为我看到页眉中有4个元素，页脚中只有3个元素.

In your case please move headers(like Social sec no. etc) from <tbody> to <thead>, and also your header and footer is not matching please make them same as I see there is 4 elements in header and only 3 in footer.

这篇关于在colspan中使用DataTables时，无法读取未定义的属性'mData'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！