Clever Geek Handbook

Getting this error - unable to get property "mData" from undefined or null reference

I am getting the following error when I am using jQuery data table.

Error: Unable to get property "mData" from 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 to solve this problem?

+8


source to share


3 answers


The html structure is wrong, you need to have an element thead

where the title is given and the content must 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>
Run codeHide result


+23


source 




$(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>
Run codeHide result


0


source


\ Another HTML structure that needs to match is the th tags in your theme with the tr character in the body. That is, if you expect 5 columns in the table, then there should be a 5th tag and 5 tr.

0


source






More articles:


All Articles