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插件显示一个列表,要实现分 ...
随机推荐
- 多因子降维法(MDR，Multifactor Dimensionality Reduction ）
多因子降维法(MDR,multifactor dimensionality reduction) 多因子降维法(MDR,Multifactor Dimensionality Reduction ) ...
- 逆序对 分治nlogn
定义:A是包含n个元素的有序序列{a1,a2 … an},若ai > aj 且 i < j ,则称 (ai , aj)是A的一个逆序对.求逆序对是指求出A中存在逆序对的数量. 这个算法是归 ...
- [Selenium] 最大化或自定义浏览器的大小
driver.manage().window().maximize(); //将浏览器设置为最大化的状态 driver.manage().window().setSize(new Dimens ...
- idea注释字体倾斜的解决办法
File-->Settings-->Editor--> Color Scheme-->Language Defaults-->Comments-->Line con ...
- Linux的磁盘分区（二）
LVM逻辑卷机制 PV(Physical Volume 物理卷) - 物理分区或整个物理磁盘 - 由PE(Physical Extent,基本单元)租场 VG(Volume Group 卷组) - 一 ...
- [转载]如何将word文档直接发布到新浪博客
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- dojo和jquery混合使用
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.7 ...
- .NET基础 （09）常用集合和泛型
常用集合和泛型1 int[]是引用类型还是值类型2 数组之间如何进行转换3 解释泛型的基本原理4 什么是泛型的主要约束和次要约束 常用集合和泛型1 int[]是引用类型还是值类型 数组类型是一族类型, ...
- SDJZUOJ迷宫问题
题目描述 小明置身于一个迷宫,请你帮小明找出从起点到终点的最短路程. 小明只能向上下左右四个方向移动. 输入格式 输入包含多组测试数据.输入的第一行是一个整数T,表示有T组测试数据. 每组输入的第一行 ...
- 在ASP.NET Core2上操作MongoDB就是能这么的简便酷爽（自动完成分库分表）
NoSQL是泛指非关系型的数据库,现今在我们的项目中也多有使用,其独特的优点为我们的项目架构带来了不少亮点,而我们这里的主角(MongoDB)则是NoSQL数据库家族中的一种.事实上,NoSQL数据库 ...