Uncaught TypeError: Cannot read property 'mData' of undefined
CAUSE
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.
SOLUTION
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>LINKS
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
As stated in the DataTables usage guide, you need to have both thead and tbody sections declared in your table to get the plugin work correctly.
This thing has also been discussed here at SO before, so some Googling or SO search might be a good thing next time.
If your aaData is an array of array e.g [["col11","col12","col13"],["col21","col22","col23"]],
then only your above code will work else it will expect an mdata attribute to set to the col value e.g., aaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}],
Map aoColumns-
so in aoColumns :[{mdata:"col1"}]
Do this -
$(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
} );
} );