Uncaught TypeError: Cannot read the 'mData' property from undefined

Question

I followed this to include multiple tables (on one page) using the DataTables plugin. for manual tables, it works, but for dynamically created tables, it displays the following error:

Uncaught TypeError: Unable to read property 'mData' from undefined

my srcipt page:

$(document).ready(function() { $('table.datatable').dataTable( { 'bSort': false, 'aoColumns': [ { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "10%", bSearchable: false, bSortable: false } ], "scrollY": "200px", "scrollCollapse": false, "info": true, "paging": true } ); } ); 

my first HTML table:

 <table class="table table-striped table-bordered datatable"> <thead> <tr> <th> Issue </th> <th> Product </th> <th> Qty </th> <th class="text-right"> Paid </th> <th class="text-right"> Balance </th> <th class="text-right"> Total </th> </tr> </thead><!-- table head --> <tbody> <tr> <td>May 20, 2015</a></td> <td>Normal Sim</td> <td>1000</td> <td><span class="pull-right">Rs18,893.00 </span></td> <td><span class="pull-right">Rs131,107.00 </span></td> <td><span class="pull-right">Rs150,000.00 </span></td> </tr> <tr> <td>voice/7?invoice_type=1">May 20, 2015</a></td> <td>Nokia 3310 </td> <td>10000</td> <td><span class="pull-right">Rs2,520,000.00 </span></td> <td><span class="pull-right">Rs12,480,000.00 </span></td> <td><span class="pull-right">Rs15,000,000.00 </span></td> </tr> <tr> <td>May 20, 2015</a></td> <td>Nokia 3310 </td> <td>1000</td> <td><span class="pull-right">Rs404,000.00 </span></td> <td><span class="pull-right">Rs1,096,000.00 </span></td> <td><span class="pull-right">Rs1,500,000.00 </span></td> </tr> </tbody> </table> 

second table:

 <table class="table table-striped table-bordered datatable" id="p_history"> <thead> <tr> <th>Issue</th> <th>Paid</th> <th>Comments</th> </tr> </thead> <tbody> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 15,000.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 12.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 123.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 123.00 </td> <td></td> </tr> </tbody> </table> 

any idea how to fix?

Note: I also read this Question unanswered, the same error, but I have different criteria, so this is not a duplicate.

Answer 1

CAUSE

You are trying to initialize several tables with the same parameters, the most important is aoColumns , the definition of columns containing columns. Your aoColumns array contains only 3 elements, however, the number of columns varies in each table, so you get an error message.

From the manual :

aoColumns : if specified, the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you want to use only the default values ​​and automatically detect options.

DECISION

You need to assign a unique id to the first table and initialize each table separately, as shown below.

 $(document).ready(function() { $('#table_first').dataTable( { 'bSort': false, 'aoColumns': [ { sWidth: "15%", bSearchable: false, bSortable: false }, { sWidth: "15%", bSearchable: false, bSortable: false }, { sWidth: "15%", bSearchable: false, bSortable: false }, { sWidth: "15%", bSearchable: false, bSortable: false }, { sWidth: "15%", bSearchable: false, bSortable: false }, { sWidth: "15%", bSearchable: false, bSortable: false }, ], "scrollY": "200px", "scrollCollapse": false, "info": true, "paging": true }); $('#p_history').dataTable( { 'bSort': false, 'aoColumns': [ { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "10%", bSearchable: false, bSortable: false } ], "scrollY": "200px", "scrollCollapse": false, "info": true, "paging": true } ); } ); 

 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script> <table class="table table-striped table-bordered datatable" id="table_first"> <thead> <tr> <th> Issue </th> <th> Product </th> <th> Qty </th> <th class="text-right"> Paid </th> <th class="text-right"> Balance </th> <th class="text-right"> Total </th> </tr> </thead><!-- table head --> <tbody> <tr> <td>May 20, 2015</a></td> <td>Normal Sim</td> <td>1000</td> <td><span class="pull-right">Rs18,893.00 </span></td> <td><span class="pull-right">Rs131,107.00 </span></td> <td><span class="pull-right">Rs150,000.00 </span></td> </tr> <tr> <td>voice/7?invoice_type=1">May 20, 2015</a></td> <td>Nokia 3310 </td> <td>10000</td> <td><span class="pull-right">Rs2,520,000.00 </span></td> <td><span class="pull-right">Rs12,480,000.00 </span></td> <td><span class="pull-right">Rs15,000,000.00 </span></td> </tr> <tr> <td>May 20, 2015</a></td> <td>Nokia 3310 </td> <td>1000</td> <td><span class="pull-right">Rs404,000.00 </span></td> <td><span class="pull-right">Rs1,096,000.00 </span></td> <td><span class="pull-right">Rs1,500,000.00 </span></td> </tr> </tbody> </table> <table class="table table-striped table-bordered datatable" id="p_history"> <thead> <tr> <th>Issue</th> <th>Paid</th> <th>Comments</th> </tr> </thead> <tbody> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 15,000.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 12.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 123.00 </td> <td></td> </tr> <tr> <td>May 20, 2015, 5:15 pm</td> <td>Rs 123.00 </td> <td></td> </tr> </tbody> </table> 

References

See jQuery DataTables: Common JavaScript Console Errors for more information about this and other common console errors.

Answer 2

As stated in the DataTables usage guide, you need to have both thead and tbody sections declared in your table to get the plugin working correctly.

This thing has also been discussed here at SO , so some searches on Google or SO may be useful next time.

Answer 3

If your aaData is an array of an array, for example, [["col11","col12","col13"],["col21","col22","col23"]] , then only your code above will work differently, it will expect the mdata attribute to be set to col, for example, aaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}] ,

Map aoColumns- therefore in aoColumns: [{mdata:"col1"}]

---

Do it -

 $(document).ready(function() { $('#p_history').dataTable( { 'bSort': false, 'aoColumns': [ { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "10%", bSearchable: false, bSortable: false }, //match the number of columns here for table1 ], "scrollY": "200px", "scrollCollapse": false, "info": true, "paging": true } ); //Now for another table $('#secondTableId').dataTable( { 'bSort': false, 'aoColumns': [ { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "45%", bSearchable: false, bSortable: false }, { sWidth: "10%", bSearchable: false, bSortable: false }, //match the number of columns here for table2 ], "scrollY": "200px", "scrollCollapse": false, "info": true, "paging": true } ); } ); 

Answer 4

I got this error when I used id names like k_something_1 . I decided by renaming it to ksomething1 .