8

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.

Community
  • 1
  • 1
Abdul Manan
  • 2,255
  • 3
  • 27
  • 51
  • show your html code as well for better understanding – karvin.developer May 21 '15 at 07:47
  • 3
    According to the [usage guide](http://legacy.datatables.net/usage/) you need to have `thead` and `tbody` in your table. Are you missing either of those? – BudwiseЯ May 21 '15 at 07:49
  • As I have experiences with this already, you should check the following:- if you have tbody and thead tags - if you have the same number of rows and columns (th and tb must have the same number ) – Peter Sep 18 '15 at 05:45

4 Answers4

17

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
11

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.

Community
  • 1
  • 1
BudwiseЯ
  • 1,846
  • 2
  • 16
  • 28
  • funny thing is that I googled several times and didn't find what is wrong. luckily I read your answer which directed to the other solution and I got it resolved. thank you. –  Sep 18 '15 at 06:40
  • I googled and was taken straight to this question, so it's a good question – Rodney Ellis Aug 14 '20 at 11:32
  • @RodneyEllis I never said the question was bad. I just said it's been discussed here before. – BudwiseЯ Aug 17 '20 at 17:51
2

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
        } );
    } );
Waqar
  • 428
  • 4
  • 17
  • Are you using server side pagination ? – Waqar May 21 '15 at 08:21
  • I think you are facing problem because you are creating two datatables with the same class name. Try giving different id to each table and then in your document ready instantiate datatabes e.g $('#id1').dataTable({..your code}), $('#id2').dataTable({..your code}) – Waqar May 21 '15 at 08:30
  • Just try this in your document ready and nothing else $("#p_history").datatable(); – Waqar May 21 '15 at 09:16
  • it's working i checked,but two table at time not working – Abdul Manan May 21 '15 at 09:26
0

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

PJunior
  • 2,649
  • 1
  • 33
  • 29