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插件显示一个列表,要实现分 ...
随机推荐
- PHP实现一维数组转二维数组的方法
具体实现方法如下: <?php $asr[1] = array("a","b","c","d"); $asr[2] ...
- 微信小程序进行地图导航使用地图功能
之前我写过的文章当中,提过小程序的打包大小.所以特地去下载一个区域的地图的这种方法,是不存在的. 我用的导航主要使用的是应用外的导航,这篇文章可能对于非常熟悉小程序的小伙伴来说就是小case,所以只适 ...
- kbmMWtable for XE5 接近尾声
为了支持多平台开发的delphi XE5,kbmmwtable 做了非常大的改动. 目前已经可以在ios 和android 上建立和查询数据表了,但是众说周知,在ios 和android 上 使用Li ...
- mysql 截取字符串
#select SUBSTRING_INDEX('1,2', ',', 1); SELECT * FROM dis_disease WHERE id = ( SELECT SUBSTRING_INDE ...
- 企业搜索引擎开发之连接器connector（二十二）
下面来分析线程执行类,线程池ThreadPool类 对该类的理解需要对java的线程池比较熟悉 该类引用了一个内部类 /** * The lazily constructed LazyThreadPo ...
- task4: 结对编程-词频统计[修改版]
问题描述: 读取一个文件,统计其中单词出现次数,并按从高到低的顺序显示,相同顺序的字典序排列. 思路: 基于上次的程序用正则提取出文本里的单词,然后利用字典计数(先get,为null则置1,不为nul ...
- java性能分析工具 jconsole.exe
通过 Java visualMv结合 jconsole.exe 工具即可查看如图所示(Jconsole在JDK文件夹内,非JRE文件夹) 在Java Visualvm工具里面安装JTA插件,分析线 ...
- 安装Greenplum-perfmon-web监控软件遇到的问题及解决
环境 Product Version Pivotal Greenplum (GPDB) 4.3.x Pivotal Greenplum Command Center (GPCC) Others ...
- backbone.js 学习笔记
Backbone.Model 模型.相当于表定义,定义一个表当中有的列 defaults:设置属性的默认值 initialize():初始化函数 get(key):获取属性值 set(data):设置 ...
- 在Team Foundation Server (TFS)的代码库或配置库中查找文件或代码
[update 2017.2.11] 最新版本的TFS 2017已经增加了代码搜索功能,可以参考这个链接 https://blogs.msdn.microsoft.com/visualstudioal ...