刷新数据表时出错-无法重新初始化数据表

Error while refreshing datatables - Cannot reinitialise DataTable

本文关键字：数据表 初始化 出错 刷新      更新时间：2023-09-26

我有一个json数据，它包含两个带有多个对象的数组，我已经编写了以下代码，使我只能进行一次调用，并将结果拆分为两个表。我现在的问题是我不能再刷新表格了。我尝试了不同的选项，但得到无法重新初始化DataTable，这是有道理的，所以我想我现在被卡住了。

代码：

$(document).ready(function (){
    setInterval (function(){
        $.getJSON("ajax/json.txt", function (pcheckdata){
        <!-- ------------------- Extract Only Alerts ---------------------- -->
            $('#alert-table').dataTable({
                "bJQueryUI": true,
                "data": pcheckdata.alerts,
                "columns": [
                    { "mData": "host" },
                    { "mData": "description" }
                ],
            });
        <!-- ------------------- Extract Only Errors ---------------------- -->
            $('#error-table').dataTable({
                "bJQueryUI": true,
                "data": pcheckdata.errors,
                "columns": [
                    { data: 'host' },
                    { data: 'description' }
                ],
            });
        });
    }, 1000);
});

我的JSON结构

{
    "alerts": [
        {
            "host": "server1",
            "description": "Engine Alive"
        },
        {
            "host": "ftpserver",
            "description": "Low free disk space"
        }
    ],
    "errors": [
        {
            "host": "server3",
            "description": "Can't connect to MySQL server"
        },
        {
            "host": "server4",
            "description": "SSQL timeout expired"
        }
    ]
}

HTML位：

<table id="alert-table" class="display" cellspacing="0">
    <thead class="t-headers">
        <tr>
            <th>HOST</th>
            <th>DESCRIPTION</th>
        </tr>
    </thead>
</table>
<table id="error-table" class="display" cellspacing="0">
    <thead class="t-headers">
        <tr>
            <th>HOST</th>
            <th>ERROR DESCRIPTION</th>
        </tr>
    </thead>
</table>

我很想知道是否有办法同时刷新这两个表，因为数据只会被提取一次，还是最好纯粹使用JQUERY，忘记数据表，因为这似乎让我头疼

为什么要重新命名整个表，只需创建一次表，然后在ajax回调中清除表并添加数据。您正在使用哪个版本的数据表？我使用了旧函数来清除和添加数据，使用新表会有所不同，但你知道这个想法。

这里有一个例子：

$(document).ready(function (){
    //Init datatables without data
            <!-- ------------------- Extract Only Alerts ---------------------- -->
          var alertTable =  $('#alert-table').dataTable({
                "bJQueryUI": true,
                "columns": [
                    { "mData": "host" },
                    { "mData": "description" }
                ],
            });
        <!-- ------------------- Extract Only Errors ---------------------- -->
           var errorTable = $('#error-table').dataTable({
                "bJQueryUI": true,
                "columns": [
                    { data: 'host' },
                    { data: 'description' }
                ],
            });
    setInterval (function(){
        $.getJSON("ajax/json.txt", function (pcheckdata){
        alertTable.fnClearTable(); //New API then alertTable.clear().draw();
        alertTable.fnAddData(pcheckdata.alerts); //New API then alertTable.row.add(pcheckdata.alerts);
        alertTable.fnAdjustColumnSizing(); //New API then alertTable.columns.adjust().draw();
        errorTable.fnClearTable(); //New API then errorTable.clear().draw();
        errorTable.fnAddData(pcheckdata.errors); //New API then errorTable.row.add(pcheckdata.errors);
        errorTable.fnAdjustColumnSizing();////New API then errorTable.columns.adjust().draw()
        });
    }, 1000);
});

另一种方法是检查数据表是否已经初始化。

$(document).ready(function (){
    setInterval (function(){
        $.getJSON("ajax/json.txt", function (pcheckdata){
        //Is datatable already init.
        if ( ! $.fn.DataTable.isDataTable( '#alert-table' ) ) {
        <!-- ------------------- Extract Only Alerts ---------------------- -->
            $('#alert-table').dataTable({
                "bJQueryUI": true,
                "data": pcheckdata.alerts,
                "columns": [
                    { "mData": "host" },
                    { "mData": "description" }
                ],
            });
       }else
       {
           $('#alert-table').dataTable().clear().draw();
            $('#alert-table').dataTable().row.add(pcheckdata.alerts);
            $('#alert-table').dataTable().columns.adjust().draw();
       }
        if ( ! $.fn.DataTable.isDataTable( '#error-table' ) ) {
        <!-- ------------------- Extract Only Errors ---------------------- -->
            $('#error-table').dataTable({
                "bJQueryUI": true,
                "data": pcheckdata.errors,
                "columns": [
                    { data: 'host' },
                    { data: 'description' }
                ],
            });
       }else
        {
           $('#error-table').dataTable().clear().draw();
            $('#error-table').dataTable().row.add(pcheckdata.errors);
            $('#error-table').dataTable().columns.adjust().draw();
        }
        });
    }, 1000);
});
相关文章：