datatables.net中的複雜頭文件

Question

我正在使用datatables.net的表格插件。我遇到了複雜標題列的問題，並在使用它時出現以下錯誤。

Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820

這個網站碼（其實這是一個模板）

<!-- BEGIN:main --> 
<table id='myTable' style='width: 100%'> 
    <thead> 
     <tr> 
      <th rowspan="2"></th> 
      <th colspan="4">Contract Details</th> 
      <th colspan="4">Delivery</th> 
      <th rowspan="2">Basis Terminal Month</th> 
      <th colspan="5">Fixed</th> 
      <th colspan="4">Unfixed</th> 
      <th colspan="3">Trigger</th> 
      <th colspan="2">Payment</th> 
      <th colspan="2" rowspan="2"></th> 
     </tr> 
     <tr> 
      <th>Contract Ref</th> 
      <th>Supplier/Buyer</th> 
      <th>Grade</th> 
      <th>Days Pending</th> 
      <th>Tons</th> 
      <th>Delivered</th> 
      <th>Balance</th> 
      <th>Status</th> 
      <th>Tons</th> 
      <th>Contract Price</th> 
      <th>Contract FOB Price</th> 
      <th>Mark To Market Price</th> 
      <th>Outright Exposure FOB</th> 
      <th>Tons</th> 
      <th>Contract FOB Diff</th> 
      <th>Mark To Market FOB Diff</th> 
      <th>Differential Exposure FOB</th> 
      <th>Strike Price</th> 
      <th>Variance</th> 
      <th>Days</th> 
      <th>Due Date</th> 
      <th>Days Late</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- BEGIN:row --> 
     <tr id="row_{id}"> 
      <td>{count}</td> 
      <td>{ref_number}</td> 
      <td>{supplier}</td> 
      <td>{grade}</td> 
      <td class="formatNumber alignRight">{pending_day}</td> 
      <td class="formatNumber alignRight">{contract_tons}</td> 
      <td class="formatNumber alignRight">{delivered_tons}</td> 
      <td class="formatNumber alignRight">{pending_tons}</td> 
      <td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td> 
      <td class="alignCenter">{terminal_month}</td> 
      <td class="formatNumber alignRight">{fixed_tons}</td> 
      <td class="formatNumber alignRight">{contract_price}</td> 
      <td class="formatNumber alignRight">{contract_fob_price}</td> 
      <td class="formatNumber alignRight">{market_price}</td> 
      <td class="formatNumber alignRight">{outright_fob}</td> 
      <td class="formatNumber alignRight">{unfixed_tons}</td> 
      <td class="formatNumber alignRight">{contract_fob_diff}</td> 
      <td class="formatNumber alignRight">{market_fob_diff}</td> 
      <td class="formatNumber alignRight">{differential_fob}</td> 
      <td class="formatNumber alignRight">{strike_price}</td> 
      <td class="formatNumber alignRight">{variance}</td> 
      <td class="formatNumber alignRight">{trigger_days}</td> 
      <td>{payment_due_date}</td> 
      <td class="formatNumber alignRight">{payment_days_late}</td> 
      <td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td> 
      <td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td> 
     </tr> 
     <!-- END:row --> 
    </tbody> 
</table> 
<input type="hidden" id="action" name="action" value=""/> 
<input type="hidden" id="contract_id" name="contract_id" value=""/> 
<!-- END:main --> 

，這就是我所說的DataTable

$(document).ready(function() { 
    $("#myTable").dataTable(); 
}); 

我不知道是什麼問題的JavaScript，我在datatables.net看到他們說它通過調用datatable（）支持複雜的頭列。我認爲我的問題是來自html代碼。

Answer 1

問題出在您爲按鈕添加的最後兩列的標題中。您聲明它爲rowspan="2"和colspan="2"，DataTables將其解釋爲單列。

簡單地改變

<th colspan="2" rowspan="2"></th> 

是：

<th rowspan="2"></th> 
<th rowspan="2"></th> 

你會好到哪裏去。