Menu
i followed this for enabling multiple tables(on same page) using DataTables plugin. for manual tables it work but for dynamic created tables it shows the following error:
Uncaught TypeError: Cannot read property 'mData' of undefined
my page srcipt:
$(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 HTML first 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 Unanswered Question, same error but mine is different criteria therefore it is not a duplicate.
368
You are trying to initialize multiple table with the same options, the most important one is aoColumns, array holding column definitions. Your aoColumns array holds 3 items only, however the number of columns differ in each tables, that is why you receive an error.
From the manual:
aoColumns: If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.
You need to assign 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>See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
