javascript - How to fix JQuery DataTables mData error on table with html -

i used following html table 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 sure?')"><i class="glyphicon glyphicon-trash"></i></button>                 </div>                 </form>             </td>         </tr>         </tbody> </table> 

here, table have html tags. used following js paginate:

$('.table').datatable(); 

here while implementing above js i'm getting error:

cannot read property 'mdata' of undefined

how can resolve this? help/suggestion helpful

you have invalid html markup jquery datatables.

first, there should @ least 1 column in header each column in table body, see complex header example. need either remove colspan , replace individual th elements or add row of header columns th element each column in body.

secondly, there mismatch between number of header columns (10) , and number of columns in body (9).

as side note avoid initializing datatables class name .table , use element id #products-table in case have other tables same class don't want initialize datatables.

see corrected example code , demonstration.