1

Estoy agregando en mi function rellenar() botones a un datatable para incrementar y disminuir un valor específico de la fila. Llamo al método del botón Agregar() que espera un clic. En este método uso Ajax nuevamente para traer la nueva información de la tabla desde un controlador.

Esto funciona solo la primera vez, me regresa mi objeto y puedo agregarlo llamando al primer método rellenar(). Pero la segunda vez, al llamar al método del botón, el valor de la fila me regresa undefined

Primero llamo a este método que inicializa listas y llama a mi método rellenar():

$("#Articulo").on("click", function (e) {
  e.preventDefault();
  articular();
});

var articular = function () {
  $listaIdVenta = $("#IdVentas");
  $.ajax({
    url: "/veVentas/GetDatosVenta",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: {
      IdRegistro: $("#IdRegistro").val(),
      IdSucursal: $("#IdSucursal").val(),
      IdUsuario: $("#IdUsuario").val(),
      FechaVenta: $("#FechaVenta").val(),
      Subtotal: $("#Subtotal").val(),
      IEPS: $("#IEPS").val(),
      IVA: $("#IVA").val(),
      Total: $("#Total").val(),
      Folio: $("#Folio").val(),
      Productos: $("#Productos").val(),
      Estatus: $("#Estatus").val(),
      Tipo: $("#Tipo").val(),
      TipoPago: $("#TipoPago").val(),
      IdRegistroDetalle: $("#IdRegistroDetalle").val(),
      IdVentasDetalle: $("#IdVentasDetalle").val(),
      IdProductoDetalle: $("#IdProductoDetalle").val(),
      PrecioUniDetalle: $("#PrecioUniDetalle").val(),
      IEPSUniDetalle: $("#IEPSUniDetalle").val(),
      IVAUniDetalle: $("#IVAUniDetalle").val(),
      CantidadDetalle: $("#CantidadDetalle").val(),
      EstatusDetalle: $("#EstatusDetalle").val(),
      DescuentoDetalle: $("#DescuentoDetalle").val(),
    },
    traditional: true,
    success: function (result) {
      //console.log(result);
      let vali = result;

      if (result[0] == 1) {
        $(".toast").addClass("Rechazado");
        $(".toast").html(result[1]);
      } else {
        $(".toast").addClass("Aceptado");
        $("#Productos").val(result["productos"]);
        $(".toast").html(result["item1"]["value"][1]);

        //console.log(result['item2']['value'][0]['idVentas']);
        //console.log(result);
        var precio;

        $("#ventaid").text(
          "Agregar Productos " + result["item2"]["value"][0]["idVentas"]
        );

        rellenar(result["item2"]["value"]);
      }
      $(".toast").toast("show");
    },
    error: function () {
      $(".toast").toast("show");
    },
  });
};

Luego en rellenar(), recibo el objeto y hasta aquí todo bien. Agrego los botones en defaultcontent al final, llamo al método del primer botón y le envío tbody y la tabla:

function rellenar(datos) {
  CalcularTotal(datos);
  var table = $("#dataTable").DataTable({
    destroy: true,
    data: datos,
    columns: [
      //{ "data": "idRegistro" },
      //{ "data": "idVentas" },
      //{ "data": "idProducto" },
      { data: "producto" },
      { data: "precioUni" },
      { data: "iepsUni" },
      { data: "ivaUni" },
      { data: "cantidad" },
      { data: "estatus" },
      { data: "descuento" },
      {
        defaultContent:
          "<button type='button'id='sumar' class='plus btn btn-success'>+</button><button type='button' class='minus btn btn-warning'>-</button><button type='button' class='delete btn btn-danger'>X</button>",
      },
      //asp - action='Sumar'  asp - route - id='@item.IdProducto'
      //{ "defaultContent": "<button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item'>+</button><button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item' > -</button ><button asp-action='EliminarTempDetalle' asp-route-id='@item.IdProducto' class='dropdown-item'>Eliminar</button>"}
    ],

    dom: "Bfrtip",
    buttons: [
      {
        extend: "excel",
        text: "<i ></i>",
        className: "btn btn-success btn-sm icon-excel3",
        exportOptions: {
          columns: "th:not(:last-child)",
        },
      },
      {
        extend: "pdf",
        text: "<span ></span>",
        className: "btn btn-danger btn-sm icon-pdf3",
        exportOptions: {
          columns: "th:not(:last-child)",
        },
      },
    ],
    language: {
      lengthMenu: "Mostrar _MENU_ por página",
      zeroRecords: "Ninguna coincidencia",
      info: "Página  _PAGE_ de _PAGES_",
      infoEmpty: "No hay registros disponibles",
      infoFiltered: "(_MAX_ registros)",
      sSearch: "Buscar",
      oPaginate: {
        sFirst: "Primero",
        sPrevious: "Anterior",
        sNext: "Siguiente",
        sLast: "Último",
      },
    },
  });

  Agregar("#dataTable tbody", table);
}

Todo esto llega a este método, donde con Ajax mando mi id para saber cuál incrementar y me regresa la lista entera:

var Agregar = function (tbody, table) {
  $(tbody).on("click", "button.plus", function () {
    var datos = table.row($(this).parents("tr")).data();
    console.log("agregar");
    console.log(datos);
    //$('#IdProductoDetalle').val(datos['idProducto']);

    //$('#CantidadDetalle').val(1);
    //articular();

    $.ajax({
      url: "/veVentas/Sumar",
      type: "GET",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: {
        idProducto: datos["idProducto"],
      },
      traditional: true,
      success: function (result) {
        console.log("result");
        console.log(result);
        console.log("result 0");
        console.log(result[0]);

        rellenar(result);
        //return result;
      },
      error: function () {
        $(".toast").toast("show");
      },
    });
  });
};

Aquí vuelvo a llamar a mi método rellenar mandándole la lista que recibí y funciona. Pero solo la primera vez, donde sí recibo la información de la fila, pero la segunda vez regresa undefined.

1 respuesta 1

0

Hay algunos errores de lógica, el principal y que es el causante de comportamiento inesperado es:

Cada que ejecutas rellenar() llamas la función Agregar() y creas un nuevo "escuchador" de clics en el cuerpo de la tabla; la primera vez funciona porque solo hay una función para ejecutarse, sin embargo, cuando recargas datos y aplicas destroy: true, supongo que el primer escuchador pierde la referencia de table y por eso recibes el error.

Posible solución:

  • Crea la variable table en contexto global y no la uses como parámetro para escuchar eventos
  • Asigna el evento a la tabla (no al cuerpo) y fuera de la función rellenar(), usando la variable global para acceder a los datos
// Define la variable en contexto global
var table;
function rellenar(datos) {
  CalcularTotal(datos);
  // Actualiza la variable global
  table = $("#dataTable").DataTable({
    destroy: true,
    data: datos,
    columns: [
      //{ "data": "idRegistro" },
      //{ "data": "idVentas" },
      //{ "data": "idProducto" },
      { data: "producto" },
      { data: "precioUni" },
      { data: "iepsUni" },
      { data: "ivaUni" },
      { data: "cantidad" },
      { data: "estatus" },
      { data: "descuento" },
      {
        defaultContent:
          "<button type='button'id='sumar' class='plus btn btn-success'>+</button><button type='button' class='minus btn btn-warning'>-</button><button type='button' class='delete btn btn-danger'>X</button>",
      },
      //asp - action='Sumar'  asp - route - id='@item.IdProducto'
      //{ "defaultContent": "<button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item'>+</button><button asp-action='EditTemporal' asp-route-id='@item.IdProducto' class='dropdown-item' > -</button ><button asp-action='EliminarTempDetalle' asp-route-id='@item.IdProducto' class='dropdown-item'>Eliminar</button>"}
    ],

    dom: "Bfrtip",
    buttons: [
      {
        extend: "excel",
        text: "<i ></i>",
        className: "btn btn-success btn-sm icon-excel3",
        exportOptions: {
          columns: "th:not(:last-child)",
        },
      },
      {
        extend: "pdf",
        text: "<span ></span>",
        className: "btn btn-danger btn-sm icon-pdf3",
        exportOptions: {
          columns: "th:not(:last-child)",
        },
      },
    ],
    language: {
      lengthMenu: "Mostrar _MENU_ por página",
      zeroRecords: "Ninguna coincidencia",
      info: "Página  _PAGE_ de _PAGES_",
      infoEmpty: "No hay registros disponibles",
      infoFiltered: "(_MAX_ registros)",
      sSearch: "Buscar",
      oPaginate: {
        sFirst: "Primero",
        sPrevious: "Anterior",
        sNext: "Siguiente",
        sLast: "Último",
      },
    },
  });

  // No se necesita la función Agregar
}

// Asigna el evento fuera de la función y usando la variable global
$('#dataTable').on("click", "button.plus", function () {
    var datos = table.row($(this).parents("tr")).data();
    console.log("agregar");
    console.log(datos);
    //$('#IdProductoDetalle').val(datos['idProducto']);

    //$('#CantidadDetalle').val(1);
    //articular();

    $.ajax({
      url: "/veVentas/Sumar",
      type: "GET",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: {
        idProducto: datos["idProducto"],
      },
      traditional: true,
      success: function (result) {
        console.log("result");
        console.log(result);
        console.log("result 0");
        console.log(result[0]);

        rellenar(result);
        //return result;
      },
      error: function () {
        $(".toast").toast("show");
      },
    });
});

Se asigna el evento a la tabla y no al cuerpo (tbody) porque podría no existir, ya sea porque no lo incluiste en el código HTML o porque al usar destroy: true hay la posibilidad de que se elimine y se vuelve a crear, desconozco cómo funciona esta parte.

No importa en qué momento agregues filas, la función se va a ejecutar solo cuando se haga clic en un botón con clase plus y siempre va a acceder a los datos que tenga la variable global table.

Seguramente hay mejores formas de manejar DataTable, por ejemplo, simplemente cargar un nuevo conjunto de datos, pero tu código no está planteado para ese escenario.

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.