DataTables (API)- 清除并读取数据到 table

Question

我正在使用 DataTables，下面的内容非常适合填充和呈现 table

loadTableDS = function (data) {

    var len = data.d.length;

    if (len > 0) {
        var r = new Array(), j = -1;

        for (var key = 0, size = len; key < size; key++) {
            r[++j] = '<tr><td>';
            r[++j] = data.d[key].CRMFieldOperativeGuid.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].Eastings.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ActualDistance.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ActualTravelTimeMinutes.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].Northings.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].PostcodeNS.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].RES_TYPE_ID.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].RS_ID.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ResourceCode.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ResourceAvailableStart.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ResourceAvailableEnd.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].FullName.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].Postcode.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].EstimatedDistance.toString();
            r[++j] = '</td><td>';
            r[++j] = getDateTime(data.d[key].ResourceAvailableStart);
            r[++j] = '</td><td>';
            r[++j] = getDateTime(data.d[key].ResourceAvailableEnd);
            r[++j] = '</td><td>';
            r[++j] = data.d[key].EstimatedInstructionTimeMinutes.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].EstimatedTravelTimeMinutes.toString();
            r[++j] = '</td><td>';
            r[++j] = data.d[key].ResourceType.toString();
            r[++j] = '</td></tr>';

        }

        $('#tblDayShiftEngineers tbody').html(r.join(''));

        var dsengineers = $('#tblDayShiftEngineers').DataTable({
            "destroy": true,
            "info": false,
            "lengthChange": true,
            dom: 'T<"clear">lfrtip',
            tableTools: {
                "sRowSelect": "single",
                "aButtons": ""
            }
        });

        // hide the first 11 columns 
        for (var i = 0; i < 11; i++) {
            dsengineers.column(i).visible(false);
        }

    }
}

table 已填充，前 11 行已隐藏。 data 变量由 ajax 调用填充。

现在我需要能够刷新 table，即调用函数，清除所有现有行并使用新的 data 变量重新填充。

我将 table 的初始化移动到函数的开头：

loadTableDS = function (data) {


    var dsengineers = $('#tblDayShiftEngineers').DataTable({
        "destroy": true,
        "info": false,
        "lengthChange": true,
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "sRowSelect": "single",
            "aButtons": ""
        }
    });

    // hide the first 11 columns 
    for (var i = 0; i < 11; i++) {
        dsengineers.column(i).visible(false);
    }

    var len = data.d.length;

    if (len > 0) {

但这不起作用，因为 11 个数据列仍然存在（我也尝试将隐藏代码移动到填充 table 之后 - 没有区别）。

我试过 clear().draw();没有快乐。

在我把我的电脑从 window 中扔出去之前，有人可以给我一个指导，甚至是关于我哪里出错的伪代码！ :)

非常感谢

Answer 1

我不确定您使用的是哪个版本的 DataTables，但我使用：

if($tableloaded == false){
    loadTable();
} else {
    $('#jobTable').dataTable().fnDestroy();
    loadTable();
}

这非常适合我。

此外，这是来自 DataTables 当前 API:

var table = $('#myTable').DataTable();

$('#tableDestroy').on( 'click', function () {
   table.destroy();
} );

DataTables (API)- 清除并读取数据到 table

DataTables (API)- clear and readd data to table

javascript

jquery

jquery-datatables