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

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>

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>

Share Improve this question edited Jan 11, 2018 at 3:27 Gyrocode. 59k16 gold badges157 silver badges192 bronze badges asked Jan 9, 2018 at 7:26 Bala 1593 silver badges16 bronze badges

1 Add your jquery code – Pedram Commented Jan 9, 2018 at 7:30
@Mr.x Please check now. I have added it – Bala Commented Jan 9, 2018 at 8:53
1 It seems you could be right about colspan @Bala. According to the forum it's not supported yet: datatables/forums/discussion/14/datatables-and-colspan – 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 Commented Jan 9, 2018 at 10:13
@Bala and what about the number of columns you are using. Have you read this? stackoverflow./questions/39376658/… . Also have you created more than one datatable in your project? – Derek Nolan Commented Jan 9, 2018 at 11:09

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.25/css/jquery.dataTables.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables/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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot read property 'style' of undefined on using jquery datatable - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)