DataTables无法添加行：调用row.add无新行但条目数增加

我尝试使用DataTables的add_row方法，表格包含select、input等HTML元素（简化为仅含输入框的单列结构）。点击“添加行”按钮后，条目计数增加，控制台无报错或警告，但看不到新增行。相关代码如下：

<script type="text/javascript">
    let tbl_add_unit;
    let _jAddOrg;   //更新前
    let _jAddUpt;   //更新後
    let _colDefs_addUnit;
    let _columns_addUnit = [
        { "data": "NO", "title": "NO", "name": "NO" },
        { "data": "APPLY_DATE", "title": "適用開始年月", "name": "APPLY_DATE" },
        { "data": "PRICE", "title": "単価", "name": "PRICE" }
    ];

    if (tbl_add_unit != null) {
       tbl_add_unit = $('#tblAddUnit').DataTable();
       tbl_add_unit.destroy();
       $('#tblAddUnit').empty();
       tbl_add_unit = null;
    }

    tbl_add_unit = $('#tblAddUnit').DataTable({
    destroy: true,
    serverSide: true,
    ajax: {
          url: '@Url.Action("AddPriceUnitList", "CaseYG")',
          method: 'POST',
           dataType: 'json',
           data: {
                oilcd: row.find("td").eq(0).text(),
                sitecd: _siteCd
                  },
                  dataSrc: function (response) {
                        var parseRows = null;
                        _jAddOrg = $.parseJSON(response.data);  //元データを保持
                        parseRows = $.parseJSON(response.data);
                        return parseRows;
                    }
                },
           columns: _columns_addUnit,
           columnDefs: _colDefs_addUnit,
           info: false,
           deferRender: true,
           searching: false,
           lengthChange: false,
           ordering: false,
           scrollY: '30vh',
           scrollX: true,
           scrollCollapse: true,
           rowReorder: true,
           dom: '<"top"l>t<"bottom">',
           error: function (error) {
                alert(error);
           }
                
     });
            
tbl_add_unit.row.add([　　// => cannot add
   {
       "NO": "",
       "APPLY_DATE": "",
       "PRICE": ""
   }                
]).draw(false);
</script>

1. 服务端模式冲突：开启了serverSide: true后，DataTables的所有数据渲染、分页等逻辑由后端接口控制，客户端通过row.add()添加的数据不会被后端接口返回，因此draw()后页面不会显示新增行。
2. API调用错误：row.add()接收的是单个行数据对象，不需要用数组包裹，当前写法传递了一个包含对象的数组，不符合API要求。

方案1：关闭服务端模式（适合小数据量场景） #

如果业务不需要服务端分页/排序，直接修改配置并修正row.add()写法：

// 初始化表格时关闭服务端模式
tbl_add_unit = $('#tblAddUnit').DataTable({
    destroy: true,
    serverSide: false, // 修改此处
    // 其他配置保持不变
});

// 修正后的添加行代码
tbl_add_unit.row.add({
    "NO": "",
    "APPLY_DATE": "",
    "PRICE": ""
}).draw(false);

方案2：服务端模式下的适配（必须保留服务端模式时） #

1. 前端维护临时新增数据数组，点击添加时将数据存入该数组
2. 调用draw()时，通过ajax.data将临时数据传递给后端接口
3. 后端接口合并原有数据与临时新增数据，返回完整数据集
4. 修正row.add()的写法（去掉外层数组）

额外优化点 #

• 移除未定义的columnDefs: _colDefs_addUnit配置，或为其赋值
• 初始化表格前的销毁逻辑可简化：因已设置destroy: true，无需手动执行destroy()和empty()

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