Select not being rendered when adding a row programmatically within Data-Table

Question

I want to add a row programmatically (data comes from a modal). I know there's a function called add row.

Initially, the data is loaded with thymeleaf as follows (you can ignore every piece of code related to thymeleaf):

<div class="table-responsive">
<table 
    id="tablaDatosComprobacion" 
    class="table table-striped"
    style="height:0px; min-height:30vh;">
    <thead>
        <tr>
            <th>NIF</th>
            <th>Nombre</th>
            <th>Primer Apellido</th>
            <th>Segundo Apellido</th>
            <th>Fecha de nacimiento</th>
            <th>Servicios Web</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tablaDatosComprobacionBody">
        <tr th:each="dato : *{datosComprobaciones}" th:id="|row${dato.id}|">
            <td>
                <input 
                    type="text" 
                    th:id="|nif${dato.id}|"
                    th:value="${dato.nif}"/>
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|nombre${dato.id}|"
                    th:value="${dato.nombre}" />
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|pa${dato.id}|"
                    th:value="${dato.apellido1}" /> 
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|sa${dato.id}|"
                    th:value="${dato.apellido2}" /> 
            </td>
            <td>
                <input
                    type="date" 
                    th:id="|fn${dato.id}|"
                    th:value="${#temporals.format(dato.fechaNacimiento, 'yyyy-MM-dd')}" /> 
            </td>
            <td>
                <select 
                    th:id="|sw${dato.id}|" 
                    class="selectpicker"
                    multiple="multiple"
                    data-container='body' 
                    data-actions-box='true' 
                    data-selected-text-format='count > 2'>
                    <th:block th:each="sw : ${serviciosweb}">
                        <option 
                            th:id="${sw}" 
                            th:value="${sw}" 
                            th:if="${#lists.contains(dato.serviciosWeb, sw)}"
                            selected="selected" 
                            th:text="${sw}"></option>
                        <option 
                            th:id="${sw}" 
                            th:value="${sw}" 
                            th:unless="${#lists.contains(dato.serviciosWeb, sw)}"
                            th:text="${sw}"></option>
                    </th:block>
                </select>
            </td>
            <td>
                <input 
                    type="hidden" 
                    th:id="|id${dato.id}|" 
                    th:value="${dato.id}" />
                <a class="btn btn-default" th:id="|borrarDato${dato.id}|" role="button" href="#"><i class="fa fa-times" aria-hidden="true"></i></a>
            </td>                                                   
        </tr>
    </tbody>
</table>

This is how it looks:.

When I click a button, a modal is opened so that the user can input data for a new row. When the user clicks add within the modal, a new row is added that way:

var tablaDatosComprobacion = $("#tablaDatosComprobacion").DataTable(
// ... some ignorable code
var idNewRow = 3;
var newRowToAdd = 
    "<tr id='row" + idNewRow + "'>" +
    "<td>" +
    "<input type='text' id='nif" + idNewRow + "' value='" + addCompDiarNifVal + "' />" + 
    "</td>" + 
    "<td>" +
    "<input type='text' id='nombre" + idNewRow + "' value='" + addCompDiarNombreVal + "' />" + 
    "</td>" + 
    "<td>" +
    "<input type='text' id='pa" + idNewRow + "' value='" + addCompDiarPrimerApellidoVal + "' />" + 
    "</td>" +
    "<td>" +
    "<input type='text' id='sa" + idNewRow + "' value='" + addCompDiarSegundoApellidoVal + "' />" + 
    "</td>" +
    "<td>" +
    "<input type='date' id='fn" + idNewRow + "' value='" + addCompDiarFechaNacimientoVal + "' />" + 
    "</td>" +
    "<td>";

var listaServiciosWeb = [[${serviciosweb}]];
newRowToAdd +=
    "<select class='selectpicker' multiple data-container='body' data-actions-box='true' data-selected-text-format='count > 3' id='sw" + idNewRow + "'>" ;
_.each(listaServiciosWeb, function(sw){
    var optionSeleccionado = _.contains(addCompDiarServiciosWebVals, sw.$name);
    if(optionSeleccionado){
        newRowToAdd +=  
        "<option id='" + sw.$name + "' selected='selected' value='" + sw.$name + "'>" + sw.$name + "</option>";
    }else{
        newRowToAdd += 
        "<option id='" + sw.$name + "' value='" + sw.$name + "'>" + sw.$name + "</option>";
    }
});
newRowToAdd +=
    "</select>";
newRowToAdd += 
    "</td>" + 
    "<td>" + 
    "<input type='hidden' id='id" + idNewRow + "' value='" + idNewRow + "' />" +
    "<a class='btn btn-default' id='borrarDato" + idNewRow + "' role='button' href='#'><i class='fa fa-times' aria-hidden='true'></i></a>" + 
    "</td>" +                                                   
    "</tr>";
var trNewRowParsed = $.parseHTML(newRowToAdd);
tablaDatosComprobacion.row.add(trNewRowParsed).draw();

Actually, when this code is executed the wollowing message is thrown as an alert 'DataTables warning: table id=tablaDatosComprobacion - Requested unknown parameter '1' for row 2, column 1. For more information about this error, please see http://datatables.net/tn/4', whose screenshot is the following:

So, how can I add a new row programmatically? What am I doing wrong?

Thank you!

Answer 1

I agree with bluehipy, I would only allow one row to be in an edit mode at a time. It is easier to flag and track changes and send those back to the server.

However, here is a solution that is more along the lines of what you did.

The first big change I made is that instead of creating the input and select on the server, I used DataTables to create them. That way, when a new road is added, it knows how to format them. On the server, I just create the base html table with just the data in each cell. Then I used the renderer to add the select or input box.

Note that I added a sorter that will sort the data so that the added row ends up at the top of the first page.

this code is running on my jsbin at http://jsbin.com/hanaruh/edit?html,js,output

var table = $('#example').DataTable( {
    columnDefs:[{targets:[0,1,3,4,5], type:"dom-text", render:function(data, type, row, meta){
        return "<input type='text' value='" +  data + "'>";
    }},
    {targets:[2], render : 
     function(data){return createSelect(data);}}           
               ]
});
$("#btnGo").on("click", function(){
    $("#example").DataTable().row.add(["","","","","",""]).draw();
})