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插件显示一个列表,要实现分 ...

随机推荐

webkit com wrapper 推荐！
https://groups.google.com/forum/#!topic/microsoft.public.vb.general.discussion/ZaFY95aDZoY http://ww ...
boost之date_time库
最近开了boost库的学习,就先从日期时间库开始吧,boost的date_time库是一个很强大的时间库,用起来还是挺方便的.以下算是我学习的笔记,我把它记录下来,以后便于我复习和查阅. #inclu ...
Efficient algorithms for polyploid haplotype phasing 多倍体单体型分型的有效算法
背景:单倍型的推断,或沿着相同染色体的等位基因序列,是遗传学中的基本问题,并且是许多分析的关键组分,包括混合物图谱,通过下降和插补识别身份区域. 基于测序读数的单倍型定相引起了很多关注. 已经广泛研究 ...
jQuery自定义动画
$(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...
CodeForces 681B Economy Game (暴力)
题意:给定一个数,问能不能找到非负 a, b, c,使得 a × 1 234 567 + b × 123 456 + c × 1 234 = n. 析:二重循环,去确定c. 代码如下: #inclu ...
UIPickerView 修改必须滚动才修改值的bug
//相应的选择转动 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSI ...
eclipse mac
在mac下安装eclipse,挺简单的.只是字体会发虚,有点麻烦. 安装完成后,双击eclipse图标,显示包内容,contents--info.plist,在</dist>前加<k ...
SpringMvc与Struts2的对比
目前企业中使用SpringMvc的比例已经远远超过Struts2,那么两者到底有什么区别,是很多初学者比较关注的问题,下面我们就来对SpringMvc和Struts2进行各方面的比较: 1.核心控制器 ...
GlusterFS 三
性能监控 Displaying the I/0 Information $gluster volume profile gv0 startStarting volume profile on gv0 ...
docker容器日志清理
1.先查看磁盘空间 df -h 2.找到容器的containerId-json.log文件,并清理(治标不治本,log迟早还会大的) 查看各个容器的log文件大小 find /var/lib/dock ...

DataTables复杂表头

DataTables复杂表头的更多相关文章

随机推荐

热门专题