2
我正在使用datatables.net的表格插件。我遇到了复杂标题列的问题,并在使用它时出现以下错误。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代码。
也有这个问题,取消了'colspan'属性修复了它。 – 2014-02-14 10:38:39