Select 在 Data-Table 中以编程方式添加行时未呈现

Question

我想以编程方式添加一行（数据来自模态）。我知道有一个函数叫做 add row。

最初用thymeleaf加载数据如下（可以忽略与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>

它是这样的：。

当我单击一个按钮时，会打开一个模式，以便用户可以输入新行的数据。当用户在模式中单击添加时，将以这种方式添加新行：

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();

实际上，当执行此代码时，会抛出以下消息作为警报“DataTables 警告：table id=tablaDatosComprobacion - 为第 2 行第 1 列请求了未知参数“1”。有关更多信息这个错误，请看http://datatables.net/tn/4'，其截图如下：

那么，如何以编程方式添加新行？我究竟做错了什么？

谢谢！

Answer 1

我同意 bluehipy，我一次只允许一行处于编辑模式。更容易标记和跟踪更改并将其发送回服务器。

但是，这里有一个更符合您所做的解决方案。

我做的第一个重大改变是，我没有在服务器上创建输入和 select，而是使用 DataTables 来创建它们。这样，当添加新道路时，它知道如何格式化它们。在服务器上，我只使用每个单元格中的数据创建基础 html table。然后我使用渲染器添加 select 或输入框。

请注意，我添加了一个排序程序，它将对数据进行排序，以便添加的行最终位于第一页的顶部。

此代码运行在我位于 http://jsbin.com/hanaruh/edit?html,js,output

的 jsbin 上

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();
})

Select 在 Data-Table 中以编程方式添加行时未呈现

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

javascript

datatable

jquery

datatables

bootstrap-select