CODEWITHSUNDEEP
javascripthtmldatatables
Sujit Baniya
Sujit Baniya

Reputation: 915

How to fix JQuery DataTables mData error on table with html

I used following HTML table to paginate using jquery datatables

<table class="table table-responsive dataTable" id="products-table">
    <thead>
        <tr><th>Image</th>
        <th>Code</th>
        <th>Weight</th>
        <th>Jarti</th>
        <th>Wages</th>
        <th>Amount</th>
        <th class="no-sort">Status</th>
        <th colspan="3" class="no-sort">Action</th>
    </tr></thead>
    <tbody>
            <tr>
            <td>
                 <img src="/images/designs/4.JPG" style="width:120px;" class="img img-responsive" alt="Gold Ring">
            </td>
            <td>RRS</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>
                  <span for="" class="label label-warning">In Progress</span>
            </td>
            <td></td>
            <td>
                <form method="POST" action="/products/3" accept-charset="UTF-8"><input name="_method" type="hidden" value="DELETE"><input name="_token" type="hidden" value="5fkON57zDrYwdBZjL5PHjNfi1cgFQhkTg5laynQ6">
                <div class="btn-group">
                    <a href="/products/3" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-eye-open"></i></a>
                    <a href="/products/3/edit" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-edit"></i></a>
                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure?')"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
                </form>
            </td>
        </tr>
        </tbody>
</table>

Here, this table have HTML tags. I used following JS to paginate: 

$('.table').DataTable();

Here while implementing the above JS I'm getting error:

Cannot read property 'mData' of undefined

How can I resolve this? Any help/suggestion would be helpful

Upvotes: 1

Views: 304

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

You have invalid HTML markup for jQuery DataTables.

First, there should be at least one column in the header for each column in the table body, see complex header example. You need to either remove colspan and replace it with individual th elements or add another row of header columns with th element for each column in the body.

Secondly, there is a mismatch between number of header columns (10) and and number of columns in the body (9).

As a side note I would avoid initializing DataTables by class name .table and use element id #products-table in case you have other tables with the same class that you don't want to initialize as DataTables.

See corrected example for code and demonstration.

Upvotes: 1

Related Questions