Question

我有一个json数据，其中包含2个包含多个对象的数组，我将以下代码组合在一起，使我只能进行一次调用并将结果拆分为2个表。我现在遇到的问题是我不能再刷新表了。我尝试了不同的选项，但是无法重新初始化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>

我很想知道是否有办法同时刷新2个表，因为数据只会被提取一次，或者更好地使用纯粹的JQUERY而忘记数据表，因为它似乎让我很头疼

Answer 1

为什么要重新启动整个表，只需创建一次表和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);
});

另一种方法是检查数据表是否已经是init。

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

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

1 个答案: