3

estoy usando row add con datatable, peroa al agregar una segunda linea, los select apartir de la segunda linea no cargan correctamente:

Select2 carga correcxtamente en primera fila Select2 no carga correctamente a partir de la segunda fila

Mi Codigo JS que uso para agregar lineas es:

        var t = $("#kt_datatable_example_1").DataTable();
    var counter = 1;

    $("#kt_datatable_example_1_addrow").on("click", function () {
        t.row.add([
            '<input type="text" class="form-control form-control-solid" />',
            '<select class="form-select form-select-solid" id="material' + counter + '" data-control="select2" data-select2-id="select2-data-10-material-' + counter + '" data-placeholder="Seleccione"><option data-select2-id="select2-data-10-material-' + counter + '"></option ><option value="1">1SPP000000455</option><option value="2">01SPP000000456</option></select>',
            '<input type="text" class="form-control form-control-solid" />',
            '<input type="text" class="form-control form-control-solid" />',
        ]).draw(false);

        counter++;
    });

    // Automatically add a first row of data
    $("#kt_datatable_example_1_addrow").click();

Mi tabla en html es:

 <table id="kt_datatable_example_1" class="table table-sm">
                            <thead>
                                <tr class="fw-semibold fs-7 text-gray-800">
                                    <th class="w-70px">Qty</th>
                                    <th>Número de Parte</th>
                                    <th class="min-w-200px">Descripción</th>
                                    <th class="w-100px">Costo U</th>
                                </tr>
                            </thead>
                        </table>
0

1 respuesta 1

3

Al ejecutar $(selector).select2() lo que sucede es que solo se crea sobre los elementos existentes en ese momento.

Si posterior a eso vos crear un nuevo elemento y queres que algo dentro de este se convierta en select2, entonces tenes que volver a ejecutar el comando, preferentemente solo sobre el nuevo elemento.

Ejemplo:

var t = $("#kt_datatable_example_1").DataTable();
var counter = 1;

$("#kt_datatable_example_1_addrow").on("click", function() {

  t.row.add([
    '<input type="text" class="form-control form-control-solid" />',
    '<select class="form-select form-select-solid" id="material' + counter + '" data-control="select2" data-select2-id="select2-data-10-material-' + counter + '" data-placeholder="Seleccione"><option data-select2-id="select2-data-10-material-' + counter + '"></option ><option value="1">1SPP000000455</option><option value="2">01SPP000000456</option></select>',
    '<input type="text" class="form-control form-control-solid" />',
    '<input type="text" class="form-control form-control-solid" />',
  ]).draw(false);

  // Buscamos la última fila
  let rows = t.rows(counter-1);
  // Creamos el select2
  rows.nodes().to$().find('.form-select').select2()
  counter++;
});

// Automatically add a first row of data
$("#kt_datatable_example_1_addrow").click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-2.1.3/datatables.min.css" rel="stylesheet">

<button id="kt_datatable_example_1_addrow">Agregar</button>
<table id="kt_datatable_example_1" class="table table-sm">
  <thead>
    <tr class="fw-semibold fs-7 text-gray-800">
      <th class="w-70px">Qty</th>
      <th>Número de Parte</th>
      <th class="min-w-200px">Descripción</th>
      <th class="w-100px">Costo U</th>
    </tr>
  </thead>
</table>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-2.1.3/datatables.min.js"></script>

1
  • Ahora entiendo! esto funcionó perfectamente! muchisimas gracias @Marcos Commented el 9 ago. a las 15:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.