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
– Prakash Thete, Commented Apr 18, 2016 at 3:38
Yes, I just checked again, doesn't seem to be the cause. Probably the colspan thing. — SamAko
– SamAko, Commented Apr 18, 2016 at 3:43
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
– Prakash Thete, Commented Apr 18, 2016 at 3:50
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
– SamAko, Commented Apr 18, 2016 at 4:11
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
– SamAko, Commented Apr 18, 2016 at 4:13

Mr Lister · Accepted Answer · 2016-04-26 09:14:05Z

12

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.

edited Apr 26, 2016 at 9:14

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Apr 18, 2016 at 4:20

Prakash Thete

3,90230 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waldy Al-Monte · Accepted Answer · 2018-11-13 14:37:15Z

3

Had that error too, in my case was caused by a mismatched number of column headers with columns in body.

answered Nov 13, 2018 at 14:37

Waldy Al-Monte

394 bronze badges

Comments

harshainfo · Accepted Answer · 2019-02-23 02:02:15Z

2

My team had a similar issue, and we were able to solve by removing all colspan, style and class attributes from <th> and <td> tags.

So as a starting point, I would recommend removing those attributes. Further I think your tfoot tag also might cause some issues. Better remove them first and see.

answered Feb 23, 2019 at 2:02

harshainfo

5441 gold badge7 silver badges13 bronze badges

Comments

Saiful Islam · Accepted Answer · 2020-03-25 05:48:28Z

-2

ensure the tags like ... thead, tbody use correctly

good luck

answered Mar 25, 2020 at 5:48

Saiful Islam

13 bronze badges

1 Comment

Yan Sklyarenko Over a year ago

This is not an answer

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related