0

Tengo una DataTable con datos. En la misma estoy tratando de hacer click en una celda de X fila la cual me va a permitir cambiar ese dato. Una vez que le de ENTER quiero capturar el ID (que viene siendo la primera columna de esa fila):

introducir la descripción de la imagen aquí

  • En rojo es lo que que cambio
  • En azul es el valor que quiero obtener despues de cambiar el 50

El input donde edito se genera dinámicamente al darle click a las celdas de la penultima columna:

$('#tablaStandard tbody').on('click', '.cantidadX', async function() {
  if (!$('#tablaStandard').hasClass("editing")) {
    $('#tablaStandard').addClass("editing");
    var thisCell = table.cell(this);
    console.log(thisCell);
    thisCell.data($('<input class="form-control cantidadEditOrden" type="number" value="' + thisCell.data() + '" name="number">').prop("outerHTML"));
  }
});

Estoy tratando de hacer lo siguiente:

$('#tablaStandard tbody').on("keypress", ".cantidadEditOrden", (e) => {

  if (e.which == 13) {

    console.log($('#tablaStandard tr').closest("tr").find("td:first-child").html());
    console.log($('#tablaStandard tr').closest("tr").find("td:nth-child(0)").html());
    console.log($('#tablaStandard tr').find("td:eq(0)").html());
    var first_td = $('#tableID tbody tr').closest("tr") // Finds the closest <tr> 
      .find("td:first") // Finds the first <td>
      .text(); // Gets its text. 
    console.log(first_td);
    console.log($('#tableID tbody').closest("tr").find("td:first"));
    console.log($('#tableID tbody tr').closest("tr").find("td").text());
    console.log($(this).closest('tr').children('td:first').children());
    table.cell($(".cantidadEditOrden").parents('td')).data($(".cantidadEditOrden").val());
    $('#tablaStandard').removeClass("editing");

  }

});

Pero no me devuelve lo que requiero, solo esta linea:

console.log($('#tablaStandard tr').closest("tr").find("td:first-child").html());

Me esta devolviendo valor, pero me devuelve la primera coincidencia de la tabla, lo cual esta mal ya que necesito la de la fila actual:

introducir la descripción de la imagen aquí

Al tratar de traer el Indice de la DataTable, el mismo me devuelve undefined:

 var rowindex = table.row($(this).parents('tr')).index();
 console.log("Index ", rowindex);
 var id_celda = table.cell(rowindex, 0).data.id;
 console.log("Valor ", id_celda);

introducir la descripción de la imagen aquí

¿Que necesito cambiar para poder obtener el valor de la fila donde haga la modificación?

2 respuestas 2

1

Teniendo en cuenta que estamos hablando de datatables, y que este script tiene sus propios métodos para calcular estas cosas, y suponiendo que la tabla esté asignada a la variable table (tal como parece por tu código) podrias hacer lo siguiente, calculando primero en que fila estas, gracias a la clase cantidadEditOrden:

var rowindex = table.row($(".cantidadEditOrden").parents('tr')).index();

y luego asignando el valor de la primera columna (celda) de dicha fila a una variable:

var id_celda = table.cell(rowindex, 0).data();

y después ya puedes trabajar con ella para lo que necesites.

Otra solución (parecida)

var data = table.row($(".cantidadEditOrden").parents('tr')).data();
var id_celda = data[0];

Más soluciones

Analizando el porque mis anteriores ediciones de esta respuesta no funcionaban bien con el this, me acabo de dar cuenta que usas una sintaxis de flecha en esta línea:

$('#tablaStandard tbody').on("keypress", ".cantidadEditOrden", (e) => {

lo cual impide el uso de this dentro de la función, tal como esta documentado en sus limitaciones.

Si cambias eso por una función normal:

$('#tablaStandard tbody').on("keypress", ".cantidadEditOrden", function (e) {

entonces sí que funcionan mis anteriores ediciones de esta respuesta. Es decir, esto funcionaría:

var rowindex = table.row($(this).parents('tr')).index();
var id_celda = table.cell(rowindex, 0).data();

y esto también:

var data = table.row($(this).parents('tr')).data();
var id_celda = data[0];

Agrego finalmente esto en la respuesta para dejar constancia de ello.

8
  • Al tratar de "mostrar" en la consola el valor de index, este viene vacio, por lo tanto la segunda linea (el "id_celda") no me trae nada, edito la pregunta para mostrar los datos que arroja
    – Baker1562
    Commented el 2 dic. 2022 a las 19:20
  • Perdón, me confundí y pense que el click era sobre la fila y no el botón. Prueba la actualización de la respuesta que acabo de poner.
    – masterguru
    Commented el 2 dic. 2022 a las 19:25
  • 1
    ale, esta es la definitiva... esto me pasa por leerme en diagonal las preguntas, je :-) (debes ponerlo antes de reasignar el valor con table.cell, claro)
    – masterguru
    Commented el 2 dic. 2022 a las 22:10
  • 1
    De nada, gracias a tí, me has dado una idea para mejorar mi uso de datatables en lo relativo a la edición de las celdas :-) Como decia antes, me miré la pregunta de reojo solamente pero al revisarla bien me gustó como lo haces :-)
    – masterguru
    Commented el 2 dic. 2022 a las 23:55
  • 1
    @Baker1562 He actualizado mi respuesta con más soluciones, para que lo sepas por si quieres modificar tu código, y para que entiendas el porque el this no funcionaba bien
    – masterguru
    Commented el 3 dic. 2022 a las 13:03
1

Podrias en tu input en el que escribes, ponerle un atributo de dataset, digamos data-id='tuId' y en keypess hacer $(this).data('id') para obtenerlo, como en el siguiente ejemplo:

$("body").on("keypress", ".changedValue", function(e){
        if (e.which == 13){
            let id = $(this).data('id'); 
            let value = $(this).val();
            console.log(`Value: ${this.value} ID: ${id}`);
        }
        
    })
<input type="text" value="" class="changedValue" data-id="1" />
<input type="text" value="" class="changedValue" data-id="2" />
<input type="text" value="" class="changedValue" data-id="3" />
<input type="text" value="" class="changedValue" data-id="4" />
<input type="text" value="" class="changedValue" data-id="5" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Asi podrias de forma mas directa sin pasar por tanto selector de busqueda, tambien lo puedes aplicar sobre el tr

1
  • El problema es que ese input se genera dinamicamente, por lo que al generarlo tampoco se ese valor en ese momento, edite la pregunta para agregar esa parte del codigo.
    – Baker1562
    Commented el 2 dic. 2022 a las 4:06

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.