Cannot read property 'style' of undefined on using jquery datatable

Question

I am facing an error Cannot read property 'style' of undefined while using datatable jquery. I got that the problem is with colspan, but I don't know to rectify it. please help me. Here is my HTML code.

if ($.fn.dataTable) {
            $('.datatable').dataTable({
                "sPaginationType": "full_numbers",
                "defaultContent": "",
                "bDestroy": true,
            });
        }

<div class='clearfix'>
   <table class='data display datatable'>
      <thead>
         <tr>
            <th rowspan='2' style='width:40px;'>Request ID</th>
            <th rowspan='2' style='width:40px;'>Date</th>
            <th rowspan='2'>Requested By</th>
            <th rowspan='2'>Product Details</th>
            <th colspan='2' style='width:50px;text-align: center;'>MFC approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>District Officer approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>Finance Officer Approval</th>
            <th rowspan='2' colspan='2' style=' text-align:center;width:100px; '>Action</th>
            <th rowspan='2' style='width:50px;'>Remarks</th>
         </tr>
         <tr>
            <th style='width:50px;'>Name of MFC</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of DO</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of FO</th>
            <th style='width:50px;'>Date of approval</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><span id='lblRID_'0>3</span></td>
            <td>12/26/2017</td>
            <td><a style='cursor:pointer' onclick='PendingDistribution.fnEmployeeWiseData(30);' >VIVEK RAI (30)</a></td>
            <td>AS<br/>Paracitamol Syrup<br/> … 2 more products</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td style='width:40px;' class='center'><a style='cursor:pointer' onclick='PendingDistribution.fnView(3);' >View</a> </td>
            <td style='width:40px;'><a style='cursor:pointer;' onclick='PendingDistribution.fnRedirect(3);' >Distribute</a></td>
            <td style='width:40px;' class='center'><a style='cursor:pointer;' onclick='PendingDistribution.fnShowRemarks(3);' >Show</a> </td>
         </tr>
      </tbody>
   </table>
</div>

Answer 1

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script>
if ($.fn.dataTable) {
  $('.datatable').dataTable({
      "sPaginationType": "full_numbers",
      "defaultContent": "",
      "bDestroy": true,
  });
}
</script>

<div class='clearfix'>
   <table class='data display datatable'>
      <thead>
         <tr>
            <th rowspan='2' style='width:40px;'>Request ID</th>
            <th rowspan='2' style='width:40px;'>Date</th>
            <th rowspan='2'>Requested By</th>
            <th rowspan='2'>Product Details</th>
            <th colspan='2' style='width:50px;text-align: center;'>MFC approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>District Officer approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>Finance Officer Approval</th>
            <th rowspan='2' colspan='2' style=' text-align:center;width:100px; '>Action</th>
            <th rowspan='2' style='width:50px;'>Remarks</th>
         </tr>
         <tr>
            <th style='width:50px;'>Name of MFC</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of DO</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of FO</th>
            <th style='width:50px;'>Date of approval</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><span id='lblRID_'0>3</span></td>
            <td>12/26/2017</td>
            <td><a style='cursor:pointer' onclick='PendingDistribution.fnEmployeeWiseData(30);' >VIVEK RAI (30)</a></td>
            <td>AS<br/>Paracitamol Syrup<br/> … 2 more products</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td style='width:40px;' class='center'><a style='cursor:pointer' onclick='PendingDistribution.fnView(3);' >View</a> </td>
            <td style='width:40px;'><a style='cursor:pointer;' onclick='PendingDistribution.fnRedirect(3);' >Distribute</a></td>
            <td style='width:40px;' class='center'><a style='cursor:pointer;' onclick='PendingDistribution.fnShowRemarks(3);' >Show</a> </td>
         </tr>
      </tbody>
   </table>
</div>

Answer 2

this is indeed related to the number of columns. Make sure you have the same number of <th> and <td> on your table.