javascript - 数据表每 5 秒更新一次单列

Question

我正在使用datatables显示一些信息和按钮。 这是用于初始化数据表的 JavaScript

if ( ! $.fn.DataTable.isDataTable( '#datatableTable' ) ) {
        datatableTable = $('#datatableTable').DataTable({
            responsive: true,
            columnDefs: [
                         { "width": "25%", "targets": 4},
                         {
                             targets: [4,5,6],
                             //set priority to column, so when resize the browser window this botton stay on the screen because have max priority
                             visible: (document.getElementById('role').value == '[ROLE_ADMIN]' || document.getElementById('role').value == '[ROLE_FLEET_ENG]'
                                 || document.getElementById('role').value == '[ROLE_SUPPLIER]'),
                             responsivePriority: 1,
                             orderable: false,
                             searchable: false,
                         },
                         ...
                         ],
                         //fix problem with responsive table
                         "autoWidth": false,
                         "ajax":{ 
                             "url":  "datatable/" + $("#selectedCar").val(),
                             "dataSrc": ...
                                     return json.result.data;                                               
                             }, 
                             "error": function (xhr, error, thrown) {
                                 window.location.href = "/DART/500";
                             }
                         },
                         "columns": [
                                    ....
                                     {data:null, render: function ( data, type, row ) {
                                         var datId="deleteDat"+row.idAcquisition;
                                         if (row.datUploaded){  
                                             return '<button type="button" class="btn btn-danger" name="deleteDat" target="'+row.idAcquisition+'" id="'+datId+'" data-toggle="modal"'
                                             +'data-target="#deleteDatModal">Delete</button>'
                                         }else 
                                             return '<button type="button" class="btn btn-danger" name="deleteDat" target="'+row.idAcquisition+'" id="'+datId+'" data-toggle="modal"'
                                             +'data-target="#deleteDatModal" disabled>Delete</button>'                                          
                                     },
                                     ],
                                     "fnDrawCallback": function(data, type, row, meta ) {
                                         //Initialize checkbox for enable/disable user
                                         $("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                                     },
        });
    }
    else {
        datatableTable.ajax.url("datatable/" + $("#selectedCar").val()).load();
    }

第 5 列(从 0 开始)有按钮，每个按钮可能被禁用或启用，具体取决于 datUploaded boolean 值。 如果用户加载文件，这个变量会改变，但是这个值是在异步任务之后设置的，所以我不知道我的javascript中这个任务何时结束。

我想每5秒只更新这一栏，但我该怎么做呢？ 我找到 datatableTable.column(5).cells().invalidate().render() 但收到错误(第 0 行的参数“isShow”未知)并且更新不起作用。 你能帮助我吗？谢谢

Answer 1

正如我在评论中所说，您可以向 .load() 传递一个回调函数，该函数将在 ajax 请求完成时自动调用。在此回调中，您可以根据需要更新表格。更新表格后，请记住调用 datatableTable.draw(); 以应用更改。

我认为 invalidate() 和 render() 不是必需的。

所以你的else分支会是这样的

datatableTable.ajax.url("datatable/" + $("#selectedCar").val()).load(function() {
    /*
    ...do something to the table...
    */

    datatableTable.draw();
});