表内的jQuery datatable表导致mData未定义

Question

In one of my projects I am using datatables. This is one column structure in my table which is causing an error:

<th>
    <table class="table table-bordered table-condesed">
        <thead>
            <tr>
                <th colspan="7" class="text-center">Day Run</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>M</td>
                <td>T</td>
                <td>W</td>
                <td>T</td>
                <td>F</td>
                <td>S</td>
                <td>S</td>
            </tr>
        </tbody>
    </table>
</th>

Also this is the respective column:

<td>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td tabindex="0">N</td>
                <td>N</td>
                <td>N</td>
                <td>N</td>
                <td>N</td>
                <td>N</td>
                <td>Y</td>
            </tr>
        </tbody>
    </table>
</td>

I don't know why but this is throwing an error when initialized. This is the error I am facing.

Uncaught TypeError: Cannot read property 'mData' of undefined

I don't see anything wrong here. Any idea why its does not work?

Here is the live demo Demo

Answer 1

This is because you are initializing datatable by using class like:

$('.table').dataTable({searching: false, paging: false, responsive: true});

and the column definition are different for both the table, I think this is the issue.

Do one thing, provide different id to both the table and initiate datatable with those id's