1

he estado haciendo llamas mediante fetch api para poblar mis tablas, pero ahora quiero usar datatables, no he encontrado la manera de enviar el valor de la fila que quiero editar a mi evento onclick

este es mi codigo donde relleno mi tabla con los datos:

        function listaPersonas() {


                $("#tbPersona").DataTable({
                    "responsive": true,
                    "ajax": {
                        "url": "@Url.Action("Lista","Persona")",
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columns": [
                        { "data": "identificacion" },
                        { "data": "nombre" },
                        { "data": "telefono" },
                        {
                            "data": null,
                            "className": "btn-editar",
                            "defaultContent": "<button >Edit</button>"
                        },

                    ]

                });

    }

Este es el evento onclick que tenía con la llamada fetch al que quiero enviar el valor de las columnas para mostrar un modal para la edición (antes todo se almacenaba en esta linea " let persona= $(this).data("modelo")" y la enviaba a la funcion mostrarmodal)

        $("#tbPersona tbody").on("click", ".btn-editar", function () {

        let persona = $(this).data("modelo")

        mostrarModal(persona)
    })

alguien podria ayudarme a orientarme como hacer lo mismo con el valor de las columnas del datatable, es la primera vez que trabajo con ellos y por ahi lei algo sobre el render pero no he logrado que el evento de editar le lleguen las variables de la fila seleccionada

7
  • Si lo que quieres es obtener valores de los <td> de una fila, entonces dentro de la funcion que le pasas al metodo on, tienes que obtener la fila primero con const tr = $(this).closest('tr')
    – user137354
    Commented el 10 feb. 2023 a las 23:58
  • Y despues acceder a la columna específica para obtener el dato que requieras con tr.find('td:eq(0)')
    – user137354
    Commented el 10 feb. 2023 a las 23:59
  • Siendo el 0 la primera columna
    – user137354
    Commented el 10 feb. 2023 a las 23:59
  • Prueba colocando el código const tr = $(this).closest('tr') arriba de let persona = $(this).data("modelo")
    – user137354
    Commented el 11 feb. 2023 a las 0:02
  • Haz console.log despues, console.log(tr.find('td:eq(0)'))
    – user137354
    Commented el 11 feb. 2023 a las 0:02

1 respuesta 1

0

lo resolví de la siguiente manera aunque no se si sea lo más optimo:

        function listaPersonas() {
        $("#tbPersona").DataTable({
            "responsive": true,
            "ajax": {
                "url": "@Url.Action("Lista","Persona")",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "identificacion" },
                { "data": "nombre" },
                { "data": "telefono" },
                {
                    "data": null,
                    "render": function (data, type, row) {
                        return "<button class='btn btn-primary btn-editar' data-id='" + data.identificacion + "' data-nombre='" + data.nombre + "' data-telefono='" + data.telefono + "'>Editar</button>";
                    }
                },

            ]

        });

    }

y en la funcion on hice lo siguiente:

    $("#tbPersona tbody").on("click", ".btn-editar", function () {

        let NuevoModelo = Modelo_base;
        NuevoModelo["identificacion"] = $(this).data("id");
        NuevoModelo["nombre"] = $(this).data("nombre");
        NuevoModelo["telefono"] = $(this).data("telefono");

        mostrarModal(NuevoModelo)
    })

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.