TransWikia.com

Buscar un input dentro de una tabla datatable

Stack Overflow en español Asked by Jonathan Cunza on December 28, 2020

estoy varios días con un problema el cual no se como solucionar verán tengo una formulario y dentro de el esta una tabla vacía que se llena luego de que el usuario ingrese a otro formulario y seleccione el ítem que desea el cual se mostrara en el primer formulario bien dentro de la fila que se creo se agregan dos inputs los cuales quiero agregar a bootstrapvalidator pero para ello primero debo buscar el input dentro de esta fila que se ha creado y obtener su atributo name mi código es el siguiente:

function RetornarArticulo(lista) {
var $tblrows = $("#DetalleArticulo tbody tr");
var arrArticulo = '';
$tblrows.each(function (index) {
    if (tDetalleArticulo.data().count() > 0) {
        var $tblrow = $(this);
        console.log($tblrow);
        let id_articulo = $tblrow.find("[id=id_articulo]").val();
        let codigo = $tblrow.find("[id=Codigo]").text();
        let descripcion = $tblrow.find("[id=descripcion]").text();
        let unidad = $tblrow.find("[id=Unidad]").text();
        let cantidad = $tblrow.find("[id=cantidad]").val();
        let cantidad_atendida = $tblrow.find("[id=cantidad_atendida]").val();
        let montoUnitario = $tblrow.find("[id=monto_unitario_mn]").val();
        let dato = id_articulo + '|' + codigo + '|' + descripcion + '|' + unidad + '|' + cantidad + '|' + cantidad_atendida + '|' + montoUnitario;
        if (arrArticulo === '') arrArticulo = dato;
        else arrArticulo = arrArticulo + '<@ARTICULO@>' + dato;
    }
});
$("#DatosArticulo").val(arrArticulo);
$("#ListaId").val(lista);
$("#EstadoForm").val('A');
//Luego de agregar el ítem del segundo formulario uso la función reload de datatable para mostrar lo seleccionado
 tDetalleArticulo.ajax.reload();

 //Esta variable tDetalleArticulo contiene a datatable cada vez que la ejecuto en consola me muestra 0
 tDetalleArticulo.rows().iterator('row', function (context, index) {
    let inputtable = $(this.row(index).node());
    console.log(inputtable);
 });

}

Luego de revisar que muestra en consola es 0 como si no viera la fila creada ayuda.
para un mayor entendimiento agrego mi html

<div class="table-resposive">
                        <table class="table table-condensed table-striped table-hover m-t-0 m-b-0 table-main" id="DetalleArticulo">
                            <thead>
                                <tr>
                                    <th>Eliminar</th>
                                    <th style="text-align:center">Código</th>
                                    <th style="text-align:center">Descripción</th>
                                    <th style="text-align:center">Unidad</th>
                                    <th style="text-align:center">Cantidad</th>
                                    <th style="text-align:center">Precio Uni.</th>
                                    <th style="text-align:center">Precio Total</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3">
                                        <label id="lblTotalFilas">Total Registros : 0</label>
                                    </td>
                                    <td colspan="3">
                                        <label>Sub Total</label>
                                    </td>
                                    <td>
                                        <label id="lblSubTotal">0.00</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"></td>
                                    <td colspan="3">
                                        <label>I.G.V</label>
                                    </td>
                                    <td>
                                        <label id="lblIGV">0.00</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"></td>
                                    <td colspan="3">
                                        <label>Monto Total</label>
                                    </td>
                                    <td>
                                        <label id="lblMontoTotal">0.00</label>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
<script src="~/Cube_Fast/js/validator/OrdenCompra.js"></script>

la funcion se encuentra dentro de ese script y es donde inicisializa datatable que es donde creo los inputs atraves de ajax aquí la configuración

tDetalleArticulo = $("#DetalleArticulo").DataTable({
    "bFilter": false,
    "searching": false,
    "sAutoWidth": false,
    "fixedHeader": {
        header: true
    },
    "sDom": 'Bfrtip',
    "language": {
        "processing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span> ',
        "decimal": ".",
        "thousands": ","
    },
    "ajax": {
        "url": "AgregarArticulo",
        "type": "post",
        "data": function (d) {
            return {
                "listaId": $("#ListaId").val(),
                "datosArticulo": $("#DatosArticulo").val(),
                "idOrdenCompra": $("#id_orden_compra").val(),
                "EstadoForm": $("#EstadoForm").val(),
                "idMoneda": $("#id_moneda").val()
            };
        },
        "dataSrc": function (data) {
            switch (data.accion) {
                case "success":
                    let json = data.lista;
                    let conta = 0;
                    let row = [];
                    for (var i = 0; i < json.length; i++) {
                        row.push({
                            'IdArticulo': json[i].id_articulo,
                            'Codigo': json[i].Codigo,
                            'NombreArticulo': json[i].descripcion,
                            'UnidadCompraDes': json[i].UnidadCompraDes,
                            'Cantidad': json[i].cantidad,
                            'CantidadAtendida': json[i].cantidad_atendida,
                            'MontoUnitario': json[i].monto_unitario_mn,
                            'MontoTotal': json[i].monto_total_mn
                        });
                        ++conta;
                    }
                    $("#lblTotalFilas").text('Total Registros : ' + conta);
                    return row;
                case "error":
                    MostrarMensaje('Error de operación', data.Msj, 'error');
                    break;
            }
        },
    },
    "columnDefs": [
        {
            "className": 'text-nowrap',
            "targets": [0],
        }
    ],
    "columns":
    [
        {
            "width": "50px", "orderable": false,
            "render": function (data, type, full, meta) {
                console.log(full.CantidadAtendida);
                if (full.CantidadAtendida > 0) {
                    return '<input type="hidden" id="id_articulo" name="CS_OC_DETALLE_LIST[' + meta.row + '].id_articulo" value="' + full.IdArticulo + '" />' + 
                            '<input type="hidden" id="cantidad_atendida" name="CS_OC_DETALLE_LIST[' + meta.row + '].cantidad_atendida" value="' + full.CantidadAtendida + '" />';
                }
                else {
                    return '<a href="#" class="EliminarFila" data-toggle="tooltip" data-original-title="Eliminar">' +
                    '<i class="fa fa-eraser text-inverse" aria-hidden="true"></i></a>' +
                    '<input type="hidden" id="id_articulo" name="CS_OC_DETALLE_LIST[' + meta.row + '].id_articulo" value="' + full.IdArticulo + '" />';
                }
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "100px",
            "render": function (data, type, full, meta) {
                return '<label id="Codigo" name="CS_OC_DETALLE_LIST[' + meta.row + '].Codigo" >' + full.Codigo + '</label>';
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "200px",
            "render": function (data, type, full, meta) {
                return '<label id="descripcion" name="CS_OC_DETALLE_LIST[' + meta.row + '].descripcion" >' + full.NombreArticulo + '</label>';
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "50px",
            "render": function (data, type, full, meta) {
                return '<label id="Unidad" name="CS_OC_DETALLE_LIST[' + meta.row + '].UnidadCompraDes" >' + full.UnidadCompraDes + '</label>';
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "100px",
            "render": function (data, type, full, meta) {
                return '<input type="text" autocomplete="off" class="form-control csocdetalle" id="CS_OC_DETALLE_LIST[' + meta.row + '].cantidad" name="CS_OC_DETALLE_LIST[' + meta.row + '].cantidad" data-name="CS_OC_DETALLE_LIST[' + meta.row + '].cantidad" onchange="CalcularTotal()" value="' + full.Cantidad + '" />';
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "100px",
            "render": function (data, type, full, meta) {
                return '<input type="text" autocomplete="off" class="form-control" id="monto_unitario_mn" name="CS_OC_DETALLE_LIST[' + meta.row + '].monto_unitario_mn" onchange="CalcularTotal()" value="' + full.MontoUnitario + '" />';
            }
        },
        {
            "autoWidth": true, "orderable": false, "width": "100px",
            "render": function (data, type, full, meta) {
                return '<label id="monto_total_mn" name="CS_OC_DETALLE_LIST[' + meta.row + '].monto_total_mn" >' + full.MontoTotal + '</label>';
            }
        },
    ],
    "paging": false,
    "bInfo": false,
    "scrollCollapse": true,
    "sScrollX": true,
    "sSelect": true
});

2 Answers

Bueno al final cambie la función de datatable por esta

"drawCallback": function (settings) {
        let tbl = this.api();
        var input = $(tbl.rows().nodes()).find('[id^=cantidad]').attr('name');
        console.log(input);
        if (input != 'undefined' && input > 0) {
            $('#FrmOrdendeCompra').bootstrapValidator('addField', "'" + input + "'", {
                validators: {
                    notEmpty: {
                        message: 'The phone number is required'
                    }
                }
            });
        }
    }

según leí eso se ejecuta luego del ajax.reload para un función personalizada que desees hacer aquí la documentación DrawCallback

Answered by Jonathan Cunza on December 28, 2020

El $.each() de jQuery recibe dos parametros, el primero es el indice que en tu caso seria la variable index, el segundo es el objeto por el cual se esta iterando. Puedes hacerlo asi:

    "paging": false,
    "bInfo": false,
    "scrollCollapse": true,
    "sScrollX": true,
    "sSelect": true,
    "initComplete": function(settings, json) {
      tDetalleArticulo.rows().iterator('row', function (context, index) {
        let inputtable = $(this.row(index).node());
        console.log(inputtable);
      });
  }
});

Answered by alanfcm on December 28, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP