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

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

代码：

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并忘记datatables，因为它似乎让我头疼

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

以下是一个例子：

$(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);
});

---

你能给我看一下html中有两个ID的部分吗？我也使用数据表。我添加了表位。这只是基本的表结构很有趣！我见过类似的代码，所以我会尝试一下。我使用最新版本1.10.2告诉我们，如果它的工作与否，我们将尝试解决您的问题，我肯定会。请给我30分钟的时间，现在就出发。谢谢，非常感谢。你是一个明星：，我会按照你的第一个选择，并更新新的API的代码，让你知道如果一切都好。为了让这个问题更清楚，我使用了很多其他代码，比如fnRowCallback在满足列条件时更改行背景颜色，aoColumnDefs隐藏一些列，mRender根据列条件向列添加按钮，以及fnServerData在返回的json数据为null或空时不显示任何内容。请看看这一切是否正常。谢天谢地检查了小提琴代码，在我看来还行。如果你遇到任何问题，你可以发布新问题。这里有一个有趣的链接，如果您选择新的api，可以匹配新的api调用。

$(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);
});