获取此错误 - 无法获取未定义或空引用的属性“mData”

Question

I am getting the below error when I use the jQuery data table.

Error: Unable to get property 'mData' of undefined or null reference

Code

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
           $('#empTable').DataTable();
    } );
</script>

<table id="empTable" class="display" width="100%">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>AAAAA</td>
        <td>32</td>
        <td>Colombo</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>29</td>
        <td>Kandy</td>
    </tr>
</table>

Please suggest me how to fix this issue?

Answer 1

Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody .

 $(document).ready(function() { $('#empTable').DataTable(); }); 

 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script> <table id="empTable" class="display" width="100%"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td>K.Senthuran</td> <td>32</td> <td>42nd Lane</td> </tr> <tr> <td>S.Senthuran</td> <td>29</td> <td>Hampden Lane</td> </tr> </tbody> </table> 

Answer 2

 $(document).ready(function() { $('#empTable').DataTable(); }); 

 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script> <table id="empTable" class="display" width="100%"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td>K.Senthuran</td> <td>32</td> <td>42nd Lane</td> </tr> <tr> <td>S.Senthuran</td> <td>29</td> <td>Hampden Lane</td> </tr> </tbody> </table> 

Answer 3

HTML structures in the table needs to match. For instance, <th> tags in your <thead> with the <tr> 's in the <tbody> . That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.