Question

我遇到错误使用datatable jquery时无法读取未定义的属性'style'。我知道问题出在colspan，但我不知道要纠正它。请帮我。这是我的HTML代码。

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

这确实与列数有关。确保您桌上的<< strong> th >和<< strong> td >数量相同。

使用jquery数据表时无法读取未定义的属性“样式”

2 个答案: