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>
*注 不要太在意我取数据的方式，知道是这样的方法就好。希望对大家有所帮助，请轻虐。
DataTables复杂表头的更多相关文章
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
- jquery.pjax.js bug问题解决集锦
jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- Admui相关第三方插件
ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-builds/ 许可:BSD 依赖:无 DataAPI:data-pulgin="ace&q ...
- Datatables js 复杂表头 合并单元格
x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...
- dataTables设置下拉滚动出现表头挤在一起的解决方法
1.引入datatable的CSS文件 <link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min. ...
- dataTables中固定表头
dataTables中固定表头 加入 bAutowidth:false, <style> #dayReveiveMoney_payment_list_table_wrapper .dat ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
随机推荐
- js日期格式化 扩展Date()
javascript Date format(js日期格式化) 方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(H/h).分(m).秒(s ...
- java集成支付宝移动快捷支付时报错java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: IOException : algid parse error, not a sequence
出错原因是代码中的私钥设置错误,不是填原始的私钥,而是转换为PKCS8格式的私钥(Java格式的) ,改成后就会报创建交易异常了
- 判断字符串是否为回文 python
回文正序和逆序一样的字符串,例如abccba 方法一 def is_palindrome1(text): l = list(text) l.reverse() t1 = ''.join(l) if t ...
- 如何使用Office Word 2007以上在写51CTO博客
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 检测Linux系统是否支持某系统调用
随内核版本的变化,会增加一些新的系统调用,但如果glibc没有跟上,则不能直接调用,这个时候可以自己包装一下.如果想知道内核是否支持某系统调用,先得知道它的系统调用ID号,下面代码即是用来检查是否支持 ...
- Python学习-6.Python的分支语句
Python的分支语句比较简单,只有if.else.elif三个关键字,也就是说,Python没有switch语句,而且,Python中并没有?:这个三目运算符. 例子: age = 18 if ag ...
- Elasticsearch 安装的时候，Unsupported major.minor version 51.0问题的解决
Elasticsearch安装的时候报错 bootstrap/Elasticsearch : Unsupported major.minor version 51.0 网上一般说的方法是,升级或者降级 ...
- 使用Array.prototype.indexOf()的几点注意
对应indexOf这个方法,在日常开发中比较常见的应该是String.prototype.indexOf()方法,Array.prototype.indexOf()方法和其有很大的相似性,本文不想去描 ...
- Apache commons StringUtils 在运行时出现NoClassDefError错误的解决方法
Apache commons StringUtils 在运行时出现NoClassDefError错误的解决方法 在用tomcat运行WEB项目,并且使用了StringUtils包的时候,会出现 jav ...
- 云架构和openstack的思考
原文链接: http://ifeve.com/cloud-architecture-openstack/ 作者:罗立树 最近在负责公司内部私有云的建设,一直在思考怎么搞云计算,怎么才能够把云架构设计得 ...