Estoy tratando de agregar una nueva fila a la tabla de datos cargada por ajax, pero necesito que el contenido de la nueva fila sea diferente al de las filas anteriores. Estoy usando row.add.draw() y se agrega una nueva fila a la tabla pero con los mismos campos que las otras filas. Necesito que la nueva fila tenga un botón "AÑADIR" en lugar de "EDITAR" y "ELIMINAR".
Aquí están las columnas de la tabla en general:
columns: [ { data: 'mls' }, { data: 'steet' }, { data: 'city' }, { data: 'zip' }, { data: 'country' }, {'data': null, 'render': function (data, type, row, meta) { return '<button id="del-'+row.mls+'" class="btn btn-danger btn-xs edit_active" data-title="Delete" data-toggle="modal" data-target="#del" >Delete</button>'; } },esta es la función de row.add.draw() :
$("#cur_act_tbl").DataTable().row.add({"mls": '',"street": '',"city": '',"zip": '',"country": ''}).draw();En sus datos, agregue una propiedad de type que le indicará a DataTables si se trata de una fila nueva o existente. Deberá modificar su devolución de Ajax para incluir también esta propiedad (pero con el valor "existente")
{"mls": '',"street": '',"city": '',"zip": '',"country": '', "type": "new"}Luego, en DataTables, solo necesita verificar esta propiedad y devolver el botón correspondiente.
columns: [ { data: 'mls' }, { data: 'steet' }, { data: 'city' }, { data: 'zip' }, { data: 'country' }, { render: (data, type, row, meta) => { let btn = ''; if(row.type == 'new') { btn = '<button id="add-'+row.mls+'" class="btn btn-primary btn-xs edit_active" data-title="Add" data-toggle="modal" data-target="#add">Add</button>'; } else { btn = '<button id="edit-'+row.mls+'" class="btn btn-info btn-xs edit_active" data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button>'; } return btn; } ],