dataTable动态表头

Question

1.表头的内容需要根据后端返回的数据才能知道。
2.页面首次加载数据能正常展示，而是第二次的数据通过ajax来获取数据，后端数据返回正常；且使用Datatable.clear() 清除了表中行、Datatable生成的实例也使用destroy() 销毁了；这两步骤下，table的表头还是存在；此时我使用$('#example').empty() 将表头结构也去除了；
3.第二次需要加载的数据也顺利的通过传入到了data 和 columns 中；但是在渲染的时候就出问题了：它还是展示首次请求的数据；问题在于：我调试的时候发现行数据被正常clear了，只是表头数据（表结构）不能去除。
4.demo代码如下：

 <button onclick="getData()">获取数据</button>
 <table id="example" class="table table-bordered table-hover" style="width:100%"></table>
 
 <script type="text/javascript">
    var example = {},
        count = 0;
    var opts = {
        "scrollX": false,
        "bAutoWidth": true,
        "sDom": 'ti', // 'ftip'
        "paging": true,
        "pagingType": "full_numbers",
        "pageLength":10,
        "destroy": true,
        "language": {

            "sProcessing": "处理中...",

            "sLengthMenu": "显示_MENU_项结果",

            "sZeroRecords": "没有匹配结果",

            "sInfo": "显示第_START_至_END_项结果，共_TOTAL_项", "sInfoEmpty": "显示第0至0项结果，共0项",

            "sInfoFiltered": "(由_MAX_项结果过滤)",

            "sInfoPostFix": "",

            "sSearch": "快速查询:",

            "sUrl": "",

            "sEmptyTable": "表中数据为空",

            "sLoadingRecords": "载入中...",

            "sInfoThousands": ",",

            "oPaginate": {

                "sFirst": "首页",

                "sPrevious": "上页",

                "sNext": "下页",

                "sLast": "末页"

            }
        }
    };
    function getData() {
        var url = count++ % 2 === 0 ? './mockdata/subque2.json' : './mockdata/subque1.json';
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                destroyDataTbl();
                opts.data = res.dataSet;
                opts.columns = res.titles;
                example = $('#example').DataTable(opts);
                example.draw();
            }
        });
    }
    function destroyDataTbl() {
        if(typeof example.destroy === 'function') {
            example.clear();
            example.destroy();
            $('#example').empty();
            example = {};
        }
    }
</script>

5.调试
首次加载：

展示效果

第二次加载的数据：
先清理数据和销毁实例：
清理前：

清理后：

clear函数调用后，行内数被清除了，但是columns 列中的数据却一直保持；如下：

开始传入新数据：

这些也都ok;但实例化的结果却还是展示首次加载的数据

6.请问诸位有什么方法可以清除表结构吗？也没有找到api，很多论坛上说datable.Columns.clear()可以，但是根本不存在这个接口；麻烦大家发现我上面有问题帮我指出来；在这里卡了很久了，谢谢~~~~

Answer 1

//重新建表

    $('#grid_hz').remove();
    $('#div_grid_hz').html("<table id=\"grid_hz\" class=\"table table-striped table-bordered\" style=\"width:100%;\"></table>");
    

Answer 2

<!-- html部分 -->
<div class="datatable-obj-1">
    <table class="table-show"><thead></thead></table>
</div>

// js部分
// 要自定义
function datatablesConfigS1(args) {
    var fnDrawCallback = function(){
        if (args.table) {
            return datatablesAddGotoPage(args.table);
        }
        setTimeout(fnDrawCallback, 500);
    };
    if (typeof args.fnDrawCallback === 'function') {
        fnDrawCallback = args.fnDrawCallback;
    }
    args.type = toString(args.type);
    args.type = args.type.toLocaleLowerCase() === 'post' ? 'POST' : 'GET';
    args.paging = args.paging === undefined ? true : args.paging;
    args.configReal = {
        "language": {
            "processing": "正在获取数据，请稍后...",
            "lengthMenu": "显示 _MENU_ 条",
            "zeroRecords": "没有找到数据",
            "info": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
            "infoEmpty": "记录数为0",
            "infoFiltered": "(全部记录数 _MAX_ 条)",
            "infoPostFix": "",
            "search": "搜索",
            "url": "",
            "paginate": {
                "first": "第一页",
                "previous": "上一页",
                "next": "下一页",
                "last": "最后一页"
            }
        },
        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
        "lengthChange":false,
        "searching": false,
        "pageLength": 25,
        "order": [
            // [1, "desc"]
        ],
        destroy: true,
        paging: args.paging,
        serverSide: true,  //启用服务器端分页
        ajax: function (data, callback, settings) {
            args.dataRaw = null;
            var errorData = {recordsTotal:0,draw:data.draw,recordsFiltered:0,data:{}};
            if (args.loadData === false) {
                callback(errorData);
                return false;
            }
            //封装请求参数
            var param = {};
            param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.page = (data.start / data.length)+1;//当前页码
            if (data.order[0]) {
                var sortData = data.columns[data.order[0].column];
                var sort = sortData.name ? sortData.name : sortData.data;
                param.sort = '[{"property":"'+sort+'","direction":"'+data.order[0].dir.toLocaleUpperCase()+'"}]';
            }
            param = args.searchFunc(param);
            //ajax请求数据
            $.ajax({
                type: args.type,
                url: args.url,
                cache: false,  //禁用缓存
                data: param,  //传入组装的参数
                dataType: "json",
                success: function (result) {
                    //setTimeout仅为测试延迟效果
                    setTimeout(function () {
                        try{
                            if (result.success === false) {
                                _tips(result.msg);
                                callback(errorData);
                                return false;
                            }
                        } catch(e) {};
                        //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.count;//返回数据全部记录
                        returnData.recordsFiltered = result.count;//后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result.rows;//返回的数据列表
                        args.dataRaw = {data:result, returnData: returnData};//返回的源数据
                        var columns = args.columnsFunc(args.dataRaw.data);
                        settings.aoColumns = [];
                        $(settings.nTHead).empty();
                        for ( var i=0, iLen=columns.length; i<iLen; i++) {
                            args.table.oApi._fnAddColumn(settings, null);
                        }
                        args.table.oApi._fnApplyColumnDefs(settings, null, columns, function (iCol, oDef) {
                            args.table.oApi._fnColumnOptions( settings, iCol, oDef );
                        });
                        /* Build and draw the header / footer for the table */
                        args.table.oApi._fnBuildHead( settings );
                        args.table.oApi._fnDrawHead( settings, settings.aoHeader );
                        args.table.oApi._fnDrawHead( settings, settings.aoFooter );
                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }, 1);
                },
                beforeSend:function(){
                    $('body').showLoading({hPos:'center-fixed'});
                },
                complete:function(){
                    $('body').hideLoading();
                },
                error:function(){
                    $('body').hideLoading();
                }
            });
        },
        columns: args.columnsFunc(),
        fnDrawCallback: fnDrawCallback
    };
    return args.configReal;
}
// 表格1
var dataTableObj1 = {
    table: null,
    form: $('.datatable-obj-1'),
    url: '<?=Url::to(["data-source-show-search"])?>',
    searchFunc: function(params){
        params.source_type = this.form.find('input[name="s_source_type"]').val();
        params.date = this.form.find('input[name="s_date"]').val();
        params.account = this.form.find('input[name="s_account"]').val();
        return params;
    },
    columnsFunc: function(dataRaw){
        var commonArgs = {orderable:false};
        var data = [
            {data:'name1', title:'name1'},
            {data:'name2', title:'name2'}
        ];
        if (!dataRaw) return data;
        var data = [
        ];
        if (dataRaw.count > 0) {
            for (var k in dataRaw.cloumns) {
                data.push(new datatablesItem({
                    data:dataRaw.cloumns[k],
                    title:dataRaw.cloumns[k]
                }, commonArgs));
            }
        }
        return data;
    },
    loadData: false,
    paging: false
};
function searchForm(){
    return dataTableObj1.table.fnDraw();
}
// 页面加载完毕初始化表格
jQuery(document).ready(function () {
    // 表格1
    var dataTableConfig1 = new datatablesConfigS1(dataTableObj1);
    dataTableObj1.table = dataTableObj1.form.find('.table-show').dataTable(dataTableConfig1);
    dataTableObj1.loadData = true;
});