DataTables複雜表頭

時間 2019-11-30

標籤 datatables 複雜表頭简体版

原文原文鏈接

工做上的須要，要作一個複雜的表頭的DataTableshtml

thead以下jquery

遇到的問題（詳細問題能夠瀏覽官網的答案連接）ide

需自定義表頭（thead），若是不自定義則會 Cannot read property 'aDataSort' of undefinedui

<!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>

View Code

須要清除DataTables的數據和內容url

$("#exTable").dataTable().fnClearTable();

插入數據（我是使用的jq）spa

$("#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>

*注 不要太在乎我取數據的方式，知道是這樣的方法就好。但願對你們有所幫助，請輕虐。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。