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

随机推荐

CentOS7.2部署采集系统
rm -rf /etc/yum.repos.d/*scp root@192.168.48.81:/etc/yum.repos.d/* /etc/yum.repos.d/vim /etc/hosts(添 ...
null与not null
.not null CREATE TABLE `test` ( `col1` VARCHAR( ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NUL ...
使用junit单元测试SpringMvc
对于有依赖关系的方法,junit测试会有些麻烦,可以用@before @after之类的创建数据库连接,然后进行测试,但是有些太麻烦了. 所以就使用一下这个:org.springframework.t ...
idea注释字体倾斜的解决办法
File-->Settings-->Editor--> Color Scheme-->Language Defaults-->Comments-->Line con ...
ADO.net开放式并发
https://docs.microsoft.com/zh-cn/dotnet/framework/data/adonet/optimistic-concurrency 在多用户环境中,有两种用于更新 ...
linux每天一小步---tail命令详解
1 命令功能 tail命令用于显示文件中末尾的内容(默认显示最后10行内容) 2 命令语法 tail [选项参数] [文件名1] [文件名2] 3 命令参数 -f 用于循环读取文件的内容,监视文件的 ...
Git简明使用指南[转]
git - 简易指南助你开始使用 git 的简易指南,木有高深内容,;). Tweet 作者:罗杰·杜德勒感谢:@tfnico, @fhd and Namics 其他语言 english, deu ...
js 根本没有“JSON对象”这回事！ JSON对象——转
前言写这篇文章的目的是经常看到开发人员说:把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢. ...
update chnroute
curl -0 'http://ftp.apnic.net/apnic/stats/apnic/delegated-apnic-latest' | grep ipv4 | grep CN | awk ...
二段Linq Groupby操作
var messages = list.GroupBy(p=>p.RefOrderNo,(k,v)=> new {OrderNo = k,SkuInfo = v}) .Select(p = ...

DataTables复杂表头

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

随机推荐

热门专题