CODEWITHSUNDEEP
javascriptphpjquerydatatables
Abdul Manan
Abdul Manan

Reputation: 2375

Uncaught TypeError: Cannot read property 'mData' of undefined

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.

Upvotes: 8

Views: 54361

Answers (4)

PJunior
PJunior

Reputation: 2767

I got the this error while I was using id names like k_something_1. I solved it by 'renaming' it to ksomething1.

Upvotes: 0

Gyrocode.com
Gyrocode.com

Reputation: 58860

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.

Upvotes: 17

Waqar
Waqar

Reputation: 426

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
        } );
    } );

Upvotes: 2

BudwiseЯ
BudwiseЯ

Reputation: 1826

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.

Upvotes: 11

Related Questions