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

随机推荐

Docs命令大全备用
#1 一: net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" ...
list和数组排序（冒泡）
package cn.test.bubble; import java.util.ArrayList; import java.util.Arrays; import java.util.List; ...
fakeapp, faceswap, deepfacelab等deepfakes换脸程序的简单对比
https://deepfakes.com.cn/index.php/95.html https://www.cnblogs.com/zackstang/p/9011753.html
JAVA反射机制o
Reflection是Java 程序开发语言的特征之一,它允许运行中的 Java 程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性.例如,使用它能获得 Java 类中 ...
团体程序设计天梯赛L2-023 图着色问题 2017-04-17 09:28 269人阅读评论(0) 收藏
L2-023. 图着色问题时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者陈越图着色问题是一个著名的NP完全问题.给定无向图 G ...
java 传参数时类型后跟 3个点 "..." 的意义
对照代码和运行结果便知"..." 的意义 import java.util.ArrayList; public class StringDemo { public static v ...
long polling
Regular http: client 发出请求到server server 计算 response server 响应 response 给 client Polling: A client re ...
NativeScript的开发体会
上个月开始,国内的主流技术网站开始在推荐NativeScrpit,"js+xml写跨终端app"."原生体验挡不住",很多网站都拿这个当做宣传NativeScr ...
vs2008安装mvc3后新建项目报错 -- 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
解决方案: 找到主目录的.csproj文件,用文字编辑器打开你找到它找到 <Reference Include="System.Web.WebPages" /> &l ...
关于StreamReader.ReadToEnd方法
以前写抓取网页的代码喜欢用ReadToEnd,因为简单省事,后来发现,在爬取网页的时候,如果网速很慢,ReadToEnd超时的几率很大.使用Read改写后,超时几率大大减小,完整代码如下: /// & ...

DataTables复杂表头

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

随机推荐

热门专题