Datatables: Cannot read property 'mData' of undefined

FYI dataTables requires a well formed table. It must contain <thead> and <tbody> tags, otherwise it throws this error. Also check to make sure all your rows including header row have the same number of columns.

The following will throw error (no <thead> and <tbody> tags)

<table id="sample-table">    <tr>        <th>title-1</th>        <th>title-2</th>    </tr>    <tr>        <td>data-1</td>        <td>data-2</td>    </tr></table>

The following will also throw an error (unequal number of columns)

<table id="sample-table">    <thead>        <tr>            <th>title-1</th>            <th>title-2</th>        </tr>    </thead>    <tbody>        <tr>            <td>data-1</td>            <td>data-2</td>            <td>data-3</td>        </tr>    </tbody></table>

For more info read more here

A common cause for Cannot read property 'fnSetData' of undefined is the mismatched number of columns, like in this erroneous code:

<thead>                 <!-- thead required -->    <tr>                <!-- tr required -->        <th>Rep</th>    <!-- td instead of th will also work -->        <th>Titel</th>                        <!-- th missing here -->    </tr></thead><tbody>    <tr>        <td>Rep</td>        <td>Titel</td>        <td>Missing corresponding th</td>    </tr></tbody>

While the following code with one <th> per <td> (number of columns must match) works:

<thead>    <tr>        <th>Rep</th>       <!-- 1st column -->        <th>Titel</th>     <!-- 2nd column -->        <th>Added th</th>  <!-- 3rd column; th added here -->    </tr></thead><tbody>    <tr>        <td>Rep</td>             <!-- 1st column -->        <td>Titel</td>           <!-- 2nd column -->        <td>th now present</td>  <!-- 3rd column -->    </tr></tbody>

The error also appears when using a well-formed thead with a colspan but without a second row.

For a table with 7 colums, the following does not work and we see "Cannot read property 'mData' of undefined" in the javascript console:

<thead>    <tr>        <th>Rep</th>        <th>Titel</th>        <th colspan="5">Download</th>    </tr></thead>

While this works:

<thead>    <tr>        <th rowspan="2">Rep</th>        <th rowspan="2">Titel</th>        <th colspan="5">Download</th>    </tr>    <tr>        <th>pdf</th>        <th>nwc</th>        <th>nwctxt</th>        <th>mid</th>        <th>xml</th>    </tr></thead>

Having <thead> and <tbody> with the same numbers of <th> and <td> solved my problem.