Saturday, May 11, 2024
Homepage · php
 Popular · Latest · Hot · Upcoming
74
rated 0 times [  78] [ 4]  / answers: 1 / hits: 53205  / 9 Years ago, thu, may 21, 2015, 12:00:00

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.


More From » php
 Answers
35

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.


[#66514] Tuesday, May 19, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jadap
Add To Favorites
Follow
Total Points: 101
Total Questions: 104
Total Answers: 98
Location: Mexico
Member since Sun, Jul 25, 2021
3 Years ago
;