Javascript 数据表在页面刷新时未格式化

我最近开始研究数据表，到目前为止，在社区中一些专家的帮助下，我的代码已经达到了一定的程度。我的问题是

1：当我刷新浏览器时，因为显示数据需要几秒钟，所以表标题似乎都合并在一起了

2：我也在使用datatables v1.10.x，我尝试使用新的API，如alertTable.clear（）.draw（）而不是dataTable（）.fnClearTable（）但是我得到了警报表。清除不是一个函数。我注意到从dataTable更改为dataTable似乎有效果，但仍然不起作用

任何帮助都将不胜感激，因为我还是这个插件的新手

代码：

var-red=0；
var orange=0；
$（文档）.ready（函数（）{
setInterval（函数（）{
$.getJSON（“ajax/maint1_json.txt”，函数（pcheckdata）{
if（！$.fn.DataTable.isDataTable（“#警报表”））{
$（“#警报表”）.dataTable({
“bInfo”：假，
“bJQueryUI”：没错，
“bPaginate”：错误，
“bLengthChange”：false，
“bFilter”：错误，
“数据”：pcheckdata.alerts，
“aaSorting”：[[3，“desc”]，
“栏目”：[
{“mData”：“source”}，
{“mData”：“主机”}，
{“mData”：“description”}，
{“mData”：“value”}
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
如果（数据值=“5”）
{
$（'td'，nRow）.css（'background-color'，'Red'）；
红色++；
}
否则如果（aData.value==“4”）
{
$（'td'，nRow）.css（'background-color'，'Orange'）；
橙色++；
}
},
“aoColumnDefs”：[
{
“目标”：[0]，
“可见”：假，
“可搜索”：false
},
{
“目标”：[3]，
“mRender”：功能（数据、类型、完整）{
如果（数据=“0”）{
返回“”；
}
返回数据；
}
}
],
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
$.ajax({
“数据类型”：“json”，
'type'：'POST'，
“url”：sSource，
“数据”：aoData，
“成功”：fn回调
});
},
“fnDrawCallback”：函数（oSettings）{
$（'.alertcount红色'）.empty（）.append（红色）；
$（'.alertcount orange'）.empty（）.append（orange）；
红色=0；
橙色=0；
}
});
}否则
{
$（“#警报表”）.dataTable（）.fnClearTable（）；
$（“#警报表”）.dataTable（）.fnAddData（pcheckdata.alerts）；
$（“#警报表”）.dataTable（）.fnAdjustColumnShizing（）；
}
如果（！$.fn.DataTable.isDataTable（'#错误表'））{
$（'#错误表'）。数据表({
“bInfo”：假，
“bJQueryUI”：没错，
“bPaginate”：错误，
“bLengthChange”：false，
“bFilter”：错误，
“数据”：pcheckdata.errors，
“栏目”：[
{数据：'主机'}，
{data:'description'}
],
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
$.ajax({
“数据类型”：“json”，
'type'：'POST'，
“url”：sSource，
“数据”：aoData，
“成功”：fn回调
});
}
});
}否则
{
$（“#错误表”）.dataTable（）.fnClearTable（）；
$（“#错误表”）.dataTable（）.fnAddData（pcheckdata.alerts）；
$（“#错误表”）.dataTable（）.fnAdjustColumnShizing（）；
}
});
}, 10000);
});

任何能够提供帮助或指导的人。感谢您的提问，稍微阅读一下API文档就可以帮助我理解使用DataTables和DataTables之间的区别。这里的区别是一个有大G，另一个有小G。较小的g返回jquery，而较大的g返回DataTables API.ok ChelseillRecover。。。

<script type="text/javascript" charset="utf-8">

    var red=0;
    var orange=0;
    $(document).ready(function (){

    setInterval (function(){
        $.getJSON("ajax/maint1_json.txt", function (pcheckdata){

        <!-- ------------------- Extract all Alerts ---------------------- -->
        if (!$.fn.DataTable.isDataTable('#alert-table')) {
            $('#alert-table').dataTable({
                "bInfo": false,
                "bJQueryUI": true,
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "data": pcheckdata.alerts,
                "aaSorting": [[ 3, "desc" ]],
                "columns": [
                    { "mData": "source" },
                    { "mData": "host" },
                    { "mData": "description" },
                    { "mData": "value" }
                ],
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    if ( aData.value == "5" )
                    {
                        $('td', nRow).css('background-color', 'Red');
                        red++;
                    }
                    else if ( aData.value == "4" )
                    {
                        $('td', nRow).css('background-color', 'Orange');
                        orange++;
                    }
                },

                "aoColumnDefs": [
                    {
                        "targets": [ 0 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 3 ],
                        "mRender": function( data, type, full ) {
                        if (data == "0") {
                            return '<input class="button" type="button" id="ack-action" value="Acknowledge Alert" onclick="<-- call a function to modify value -->;">';
                            }
                            return data;
                        }
                    }
                ],

                <-- if json value is null or empty -->

                'fnServerData': function (sSource, aoData, fnCallback) {
                    $.ajax ({
                        'dataType': 'json',
                        'type': 'POST',
                        'url': sSource,
                        'data': aoData,
                        'success': fnCallback
                    });
                },

                "fnDrawCallback": function ( oSettings ) {
                    $('.alertcount-red').empty().append(red);
                    $('.alertcount-orange').empty().append(orange);
                    red=0;
                    orange=0;
                }
            });

            } else
            {
                $('#alert-table').dataTable().fnClearTable();
                $('#alert-table').dataTable().fnAddData(pcheckdata.alerts);
                $('#alert-table').dataTable().fnAdjustColumnSizing();
            }

        if (!$.fn.DataTable.isDataTable('#error-table')) {  

        <!-- ------------------- Extract all Errors ---------------------- -->
            $('#error-table').dataTable({
                "bInfo": false,
                "bJQueryUI": true,
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "data": pcheckdata.errors,
                "columns": [
                    { data: 'host' },
                    { data: 'description' }
                ],

                'fnServerData': function (sSource, aoData, fnCallback) {
                    $.ajax ({
                        'dataType': 'json',
                        'type': 'POST',
                        'url': sSource,
                        'data': aoData,
                        'success': fnCallback
                    });
                }
            });
        } else
        {
            $('#error-table').dataTable().fnClearTable();
            $('#error-table').dataTable().fnAddData(pcheckdata.alerts);
            $('#error-table').dataTable().fnAdjustColumnSizing();
        }

        });
    }, 10000);
    });
</script>