DataTables服务端模式下Ajax数据获取及日期过滤问题求助

];
    console.log(data);
    $('#topAlarmsDeviceLine').DataTable({
        serverSide: true,
        //data: data,
        //retrieve: true,
        searching: false,
        ordering: false,
        paging: false,
        language: {
            info: "",
            zeroRecords: "",
        },
        columnDefs: tableModel,
        ajax: //?,
    });
};

this.refreshDashboardData = function () {
$.get(getUrl('inventoree/endpoint_dashboard_data'), {
'start': this.getStartDate(),
'end': this.getEndDate(),
},
'json')
.done(function (data) {
this.refreshDashboard(data);
}.bind(this));
};
this.refreshDashboard = function (data) {
this.topAlarmsChart(data.alarms_number);
this.topAlarmsDevice(data.top_alarms);
this.tableDevicesbyAlarmsTime(data.top_alarms);

};

#### 控制器代码（PHP）
```php
public function endpoint_dashboard_data()
    {
        $this->load->model('inventoree/endpoint_dashboard');

        $options['from'] = $this->input->get('start');
        $options['to'] = $this->input->get('end');

        $data = [
            ...
            'top_alarms'      => $this->endpoint_dashboard->getAlarmNumberByDevice($options),
            
        ];
        $this->sendJsonOutput($data);
    }

疑问

不确定是否需要修改表格模型（将render改为data），或者能否在Ajax中使用refreshDashboard方法，还是直接这样配置：

ajax: {
    url: getUrl('inventoree/endpoint_dashboard_data'),
    data: function (d) {
        d.start = this.getStartDate();
        d.end = this.getEndDate();
    }.bind(this),
    // Set the type of request to GET
    type: 'GET',
    dataType: 'json'
}

解决方案 #

1. 解决重复初始化报错 + 正确配置Ajax

报错核心是每次刷新都重复调用DataTable()初始化表格，调整逻辑并配置Ajax数据源：

this.tableDevicesbyAlarmsTime = function () {
    let tableModel = [
        {
            targets: 0,
            data: 'Denumire',
        },
        {
            data: 'processor',
            targets: 1,
            render: function(data, type, row) {
                if (type === 'display' && data > 59) {
                    return Math.round(data / 60) + 'h' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #F0AD4E; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span>";
                } else if(type === 'display' && 0 < data && data < 60) {
                    return data + 'm' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #F0AD4E; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span>";
                } else {
                    return "";
                }
            }
        },
        // 其他列配置...
    ];

    // 启用retrieve避免重复初始化，返回已存在的表格实例
    let table = $('#topAlarmsDeviceLine').DataTable({
        retrieve: true,
        serverSide: false, // 后端返回完整数据集，无需服务器端分页排序
        searching: false,
        ordering: false,
        paging: false,
        language: {
            info: "",
            zeroRecords: "",
        },
        columnDefs: tableModel,
        ajax: {
            url: getUrl('inventoree/endpoint_dashboard_data'),
            type: 'GET',
            dataType: 'json',
            // 传递日期过滤参数
            data: function() {
                return {
                    start: this.getStartDate(),
                    end: this.getEndDate()
                };
            }.bind(this),
            // 指定表格数据来自响应中的top_alarms字段
            dataSrc: function(response) {
                return response.top_alarms;
            }
        }
    });
};

2. 优化刷新逻辑

无需手动通过$.get传递数据给表格，直接调用表格的ajax.reload()刷新：

this.refreshDashboardData = function () {
    // 刷新表格数据
    $('#topAlarmsDeviceLine').DataTable().ajax.reload();
    // 刷新其他组件
    $.get(getUrl('inventoree/endpoint_dashboard_data'), {
            'start': this.getStartDate(),
            'end': this.getEndDate(),
        },
        'json')
        .done(function (data) {
            this.topAlarmsChart(data.alarms_number);
            this.topAlarmsDevice(data.top_alarms);
        }.bind(this));
};

// 页面初始化时调用一次表格初始化
this.init = function() {
    this.tableDevicesbyAlarmsTime();
};

3. 关于表格模型的疑问

render配置不需要修改，它的作用就是自定义列的显示内容，当前根据processor值展示不同格式的逻辑是合理的，保留即可。

4. 后端代码无需调整

控制器已正确接收start和end参数，返回包含top_alarms的JSON数据，符合表格dataSrc的解析需求，无需改动。

内容的提问来源于stack exchange，提问作者Denis