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>

It seems you could be right about colspan @Bala. According to the forum it's not supported yet: datatables.net/forums/discussion/14/datatables-and-colspan — Derek Nolan
– Derek Nolan, Commented Jan 9, 2018 at 9:37
@DerekNolan The issue arises only on 11th line colspan, but not in others. That's why I am not clear about it. — Bala
– Bala, Commented Jan 9, 2018 at 10:13
@Bala and what about the number of columns you are using. Have you read this? stackoverflow.com/questions/39376658/… . Also have you created more than one datatable in your project? — Derek Nolan
– Derek Nolan, Commented Jan 9, 2018 at 11:09

Fefar Ravi · Accepted Answer · 2019-12-19 05:59:27Z

3

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

answered Dec 19, 2019 at 5:59

Fefar Ravi

9598 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shiz Over a year ago

<th> and <td> have the same number

Fefar Ravi · Accepted Answer · 2021-07-15 04:59:59Z

<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>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related