DataTables使用row.add().draw()新增行时自定义内容与其他行不同

核心实现逻辑：给新增的临时行增加专属标识位，在操作列的渲染函数中根据标识判断行类型，返回对应按钮结构即可，无需单独写自定义行渲染逻辑。

步骤1：新增行时添加专属标记 #

调用row.add()时，给行数据加一个后端返回的已有行不会携带的标识字段，比如isNewRow: true：

$("#cur_act_tbl").DataTable().row.add({
    "mls": '',
    "street": '',
    "city": '',
    "zip": '',
    "country": '',
    "isNewRow": true // 新增临时行专属标记
}).draw();

步骤2：修改操作列渲染逻辑 #

在操作列的render回调中判断行类型，分别返回对应按钮：

注意：原配置中steet字段存在拼写错误，已修正为和入参一致的street，否则该列数据无法正常渲染

columns: [
    { data: 'mls' },
    { data: 'street' },        
    { data: 'city' },
    { data: 'zip' },
    { data: 'country' },             
    {
        'data': null, 
        'render': function (data, type, row, meta) {
            // 识别到是新增临时行，返回ADD按钮
            if (row.isNewRow) {
                return '<button id="add-'+meta.row+'" class="btn btn-success btn-xs add_active" data-title="Add" data-toggle="modal" data-target="#add">ADD（新增）</button>';
            }
            // 常规已有行，返回编辑+删除按钮
            return `
                <button id="edit-'+row.mls+'" class="btn btn-primary btn-xs edit_active" data-title="Edit" data-toggle="modal" data-target="#edit">EDIT（编辑）</button>
                <button id="del-'+row.mls+'" class="btn btn-danger btn-xs del_active" data-title="Delete" data-toggle="modal" data-target="#del">DEL（删除）</button>
            `;
        }
    }
]

后续处理提示 #

• 点击ADD按钮提交数据成功后，直接调用表格ajax刷新接口，或者移除该行的isNewRow属性后调用draw(false)重绘，该行就会自动切换为显示编辑、删除按钮的常规状态
• 额外添加的isNewRow字段不会影响其他列渲染，其他列都绑定了指定data字段，多余属性会被DataTable自动忽略

效果参考：

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