dataTables未在页面刷新时格式化

Question

我最近开始研究数据表，到目前为止，在社区中的某些语言的帮助下，到目前为止我的代码中已经能够达到一定的目的。我遇到的问题是

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

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

任何帮助都会非常感激，因为我还是这个插件的新手。

代码：

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