Jquery datatable 动态加载列名 实例

项目场景：

使用jquery dataTable 动态加载列展示效果：
监控业务增多，为了不重复劳动 每个业务针对自己的指标而增加新页面，决定前端表格显示直接通过动态获取列名，以便于大家不用再做重复劳动。

---

解决方案：

如下：
Html中只要div table即可：

<div id="cleanTable" style="margin-left: 20px;margin-right: 20px;">
    <table id="mytable" class="table">
    </table>
</div>

后台需要返回col 列名 和对应 列值 （后台比较熟练的原因 以下js中获取的列名直接由后台传递了，否则可以通过json数据直接前端获取列名）

function showEcharts(){
    tableClear();
    getInfo();

};



function tableClear(){
    if($.fn.dataTable.isDataTable('#mytable')){
        $('#mytable').DataTable().clear().destroy();
    }
    $('#mytable').dataTable().empty();
    $("#cleanTable").html("<table id='mytable' class='table'></table>");
}

function getInfo() {
    var displayLength = getCookie("displayLength");
    displayLength = displayLength == "" || displayLength == "null" || displayLength == "undefined" ? 100 : parseInt(displayLength); // 每页显示条数
    var cluster = $("#cluster").val();
    var area = $("#area").val();
    var monitorType = $("#monitorType").val();

    var params = {
        monitorType:monitorType,
        startTime:startTime,
        endTime:endTime,
        cluster:cluster,
        area:area
    };

    $("#loading").show();
    $
        .ajax({
            type: 'post',
            data: JSON.stringify(params),
            dataType: 'json',
            contentType: "application/json",
            url: '*******',
            complete: function (a, b, c) {
                $("#md").css("display", "none");
                $("#loading").css("display", "none");
            },

            success: function (data) {
                $("#loading").css("display", "none");
                console.log(data);
                    //用户返回信息
                var columns = [];//定义表头列名
                    var html2="<thead>";
                    html2+="<tr class='bluebgdeep fontct'>";
                    for( i in data.col){
                        html2+="<th nowrap='nowrap' class='sorting_desc' tabindex='0' aria-controls='datatable' rowspan='1' colspan='1' aria-label='"+data.col[i]+": activate to sort column ascending' style='width: 0px;' aria-sort='descending'>"+data.col[i]+"</th>";
                        columns.push({"data":data.col[i],"render":function ( data, type, row, meta )
                            {
                                if(data ==null)
                                    return ""
                                else
                                    return data
                            }});
                        }
                html2+="</tr>";
                html2+="</thead>'";
                    $("#mytable").html(html2);

                // 最下方推荐列表
                if (data.list == null) {
                    console.log('没有推荐结果');
                    $('#mytable').hide();
                    return false;
                }

                //$("#mytable").dataTable().fnDestroy(false);
                $('#mytable').dataTable({
                    "aaSorting": [[ 0, "desc" ]],
                    "data": data.list,
                    "columns": columns,
                    'iDisplayLength': displayLength,
                    "sPaginationType": "full_numbers",
                    "retrieve": true,
                    "fnDrawCallback": function () {
                        var perpage = $("#mytable_length").find("select").val();
                        setCookie("displayLength", perpage, "h10");
                    },
                    "aoColumnDefs": [
                        {"orderable":true,"aTargets":[0,2]}// 制定列参与排序
                    ],
                    "error":{}
                });
               
            }
        });
}

坑点:
1datatable对于已有表结构和数据如果不清空html一直无法显示，尝试了所有自带清空方法 clear destory empty均无效 最后直接暴力清空div clear的时候重新写入html才成功。
2对于数据格式不同 有些数据为空 如果都加入排序会报错，最后限制了起始排序的项目后 不再报错。
“aoColumnDefs”: [
{“orderable”:true,“aTargets”:[0,2]}// 制定列参与排序
],

---