DataTables复杂表头
工作上的需要，要做一个复杂的表头的DataTables
thead如下
遇到的问题（详细问题可以浏览官网的答案 链接）
需自定义表头（thead），如果不自定义则会 Cannot read property 'aDataSort' of undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table id="energySumTable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th colspan="1" width="20%"></th> <th colspan="1" width="10%">能源</th> <th colspan="2" width="20%">电</th> <th colspan="2" width="20%">水</th> <th colspan="2" width="20%">冷</th> <th colspan="1" width="10%">折合标煤</th> </tr> <tr> <th>时间</th> <th>总费用<p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>tce</p></th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
需要清除DataTables的数据和内容
$("#exTable").dataTable().fnClearTable();
插入数据（我是使用的jq）
$("#exTable").html(thead + '<tbody>'+ trTpl +'</tbody>');
document.querySelector("#exTable").innerHTML = thead + '<tbody>'+ trTpl +'</tbody>';(js 写法)
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../media/table/jquery.js"></script> </head> <body> <table id="exTable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th colspan="1" width="20%"></th> <th colspan="1" width="10%">能源</th> <th colspan="2" width="20%">电</th> <th colspan="2" width="20%">水</th> <th colspan="2" width="20%">冷</th> <th colspan="1" width="10%">折合标煤</th> </tr> <tr> <th>时间</th> <th>总费用<p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>kWh</p></th> <th>费用 <p>元</p></th> <th>总量 <p>tce</p></th> </tr> </thead> <tbody> </tbody> </table> <script> function initBuildData() { $("#exTable").dataTable().fnClearTable(); var thead = '<thead>'+ '<tr>'+ '<th colspan="1" width="20%"></th>'+ '<th colspan="1" width="10%">能源</th>' + '<th colspan="2" width="20%">电</th>'+ '<th colspan="2" width="20%">水</th>'+ '<th colspan="2" width="20%">冷</th>'+ '<th colspan="1" width="10%">折合标煤</th>' + '</tr>' + '<tr>' + '<th>时间</th>' + '<th>总费用<p>元</p></th>' + '<th>总量 <p>kWh</p></th>' + '<th>费用 <p>元</p></th>' + '<th>总量 <p>kWh</p></th>' + '<th>费用 <p>元</p></th>' + '<th>总量 <p>kWh</p></th>' + '<th>费用 <p>元</p></th>' + '<th>总量 <p>tce</p></th>' + '</tr>' + '</thead>'; destorySummaryTable(); request.get("url", function (data) { if (!data) { return; } var dtime = null,len = data.length,trTpl=""; for(var i in data){ var elePri = data[i][0].money ? data[i][0].money : '--'; var ele = data[i][0].cost ? data[i][0].cost : '--'; var coldP = data[i][1].money ? data[i][1].money : '--'; var cold = data[i][1].cost ? data[i][1].cost : '--'; var wtP = data[i][2].money ? data[i][2].money : '--'; var wt = data[i][2].cost ? data[i][2].cost : '--'; trTpl += "<tr role='row'>" + "<td class='center'>" + i + "</td>" + "<td class='center'>" + 0 + "</td>" + "<td class='center'>" + elePri + "</td>" + "<td class='center'>" + ele + "</td>" + "<td class='center'>" + 0 + "</td>" + "<td class='center'>" + 0 + "</td>" + "<td class='center'>" + 0 + "</td>" + "<td class='center'>" + 0 + "</td>" + "<td class='center'>" + 0 + "</td>" + "</tr>"; } $("#exTable").html(thead + '<tbody>'+ trTpl +'</tbody>'); $("#exTable").DataTable( { 'bDestroy': true, 'bLengthChange': false, 'bPaginate': true, //是否分页 'sPaginationType': 'full_numbers', 'iDisplayLength': 10, //显示数据条数 'bInfo': true, //数据查找状态，没数据会显示“没有数据” 'bAutoWidth': true, //自动宽度 'bSort': false, //是否排序 'bFilter': false, //过滤功能 "searching": true, //本地搜索 'bProcessing': true, "sScrollX": "100%", "sScrollXInner": "100%", "aoColumns": [ {sWidth: "10%"}, {sWidth: "10%"}, {sWidth: "10%", bSearchable: false, bSortable: false}, {sWidth: "10%", bSearchable: false, bSortable: false}, {sWidth: "10%", bSearchable: false, bSortable: false}, {sWidth: "10%"}, {sWidth: "10%"}, {sWidth: "10%"}, {sWidth: "10%"} ], "bScrollCollapse": true, 'oLanguage': { //中文化 "sSearch": "快速查找:", "sInfo": "显示 _START_ 至 _END_ 条信息/共 _TOTAL_ 条", "sZeroRecords": "没有检索到数据", "sLengthMenu": "每页显示 _MENU_ 条记录", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", 'oPaginate': { 'sNext': '下一页', 'sLast': "尾页", 'sFirst': "首页", 'sPrevious': '上一页' }, } } ); }); } </script> </body> </html>
*注 不要太在意我取数据的方式，知道是这样的方法就好。希望对大家有所帮助，请轻虐。
