Cannot read property 'mData' of undefined when using DataTables with colspan

Question

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 Uncaught TypeError: Cannot read property 'mData' of undefined

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

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.

Here's what the code looks like

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'
  ]

});

Have you checked for duplicate id of table because in my case it caused me the same problem.. — Prakash Thete
Yes, I just checked again, doesn't seem to be the cause. Probably the colspan thing. — SamAko
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. — Prakash Thete
The footer has one element with colspan="2", so that makes up for the missing piece. I moved the stuff to the thead like you suggested and it worked. Strange! I still don't know why. Thanks though — SamAko
one more thing, when I use the export to excel tool, it doesn't capture the first headers. Have you used that tool before? — SamAko

Prakash Thete Prakash Thete · Accepted Answer · 2016-04-18T04:20:04

General cause of such problems is

Mismatch between header column and footer columns.
Body elements do not match with header(Number of td in one row should match with <th> in header).
Duplication of table Id.

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.

Cannot read property 'mData' of undefined when using DataTables with colspan

4 Answers