0

tengo la siguiente tabla que es parta de una estadistica, y actualmente la construí en un script utilizando datatable, pero no logro conseguir la forma de obtener la suma de totales

tabla = $("#tabla").DataTable({
        
        pageLength: 10,
        rowId: 'id',
        ajax: {
            url: 'ruta',
            type: 'POST',
            data: filter
        },
        
        
       columns: [
               {
                title: 'Producto',
                width: '8%',
                data: 'producto',
                defaultContent: "",
                name: 'producto',
                orderable: true,
                searchable: true,
                visible: true
            },
            {
                title: 'precio',
                width: '8%',
                data: 'precio',
                defaultContent: "",
                name: 'precio',
                orderable: true,
                searchable: true,
                visible: true
            },
            {
                title: 'Precio Lista',
                width: '8%',
                data: 'precio2',
                defaultContent: "",
                name: 'precio2',
                orderable: true,
                searchable: true,
                visible: true
            },
            
            
        ],
        
        order: [
            [0, 'desc']
        ],
        
        rowCallback: function (row, data, dataIndex) {

            infoRows[dataIndex] = data;

            // Get row ID
            var rowId = data.id;

            $(row).attr("id", "row" + rowId);
            $(row).attr("irow", dataIndex);
            

            
        }
    
    }).on("draw.dt", function (e, dt, type, indexes) {
                    
        $('[data-toggle="tooltip"],[data-toggle2="tooltip"]').tooltip();
        
    });
    data.forEach(function(item,index){ 
        item.suma=0; 
        item.suma += item.precio; 
        item.suma += (item.precio + item.precio);
        console.log(item.suma) 
    });
            

}

intente hacer lo que se refleja en la data.forEach(function(item,index), pero sin éxito, estarìa necesitando saber como agregar una fila al final de cada columna con totales para que quede algo como asi

         Producto   Columna1.Precio    Columna2.Precio2
           Botella          1                  8
           Libro            4                  4

           Total            5                   12

Con el còdigo anterior solo tengo esta tabla, y no logro hacer la suma de los totales, para saber los totales de las columnas1 y columnas2:

           Producto   Columna1.Precio    Columna2.Precio2
           Botella          1                  8
           Libro            4                  4

Cualquier ayuda que me puedan brindar serà bienvenida, saludos

6
  • Tal vez esta respuesta te pueda dar una idea.
    – DjCrazy
    el 10 dic. 2022 a las 2:03
  • gracias @DjCrazy pero yo no tengo una estructura de tabla manual, la tabla la construyo en el js que expuse
    – darcas
    el 10 dic. 2022 a las 13:11
  • Entiendo, pero igual puedes ejecutar una función posterior a la creación de la tabla para calcular los totales. Otra opción es ir sumando los valores en una variable por cada iteracion del ciclo y al final simplemente muestras la suma total.
    – DjCrazy
    el 10 dic. 2022 a las 14:11
  • gracias @DjCrazy si me gustaría hacer cualquier metodo que funcione el tema es que poco uso js, y no sabria como hacerlo para agregar la fila, saludos
    – darcas
    el 10 dic. 2022 a las 15:05
  • 1
    Intenta inicilizar item.suma=0; fuera del ciclo, como lo tienes en cada ciclo lo vuelves a inicializar a 0 y se pierde la operación. Dentro del ciclo solo deja item.suma += (item.precio + item.precio); dime si funciona. Otra cosa el console.log también es fuera del ciclo. el 12 dic. 2022 a las 20:19

1 respuesta 1

1

Logré construir este ejemplo con la poca información que compartes. Trata de comprender el ejercicio y adáptalo a tu proyecto.

Es posible que este método falle si el objeto tiene más productos de los que caben en una página o al utilizar los filtros de datatables. Reitero que mi intención es mostrar una posible manera de llegar al resultado esperado, pero te sugiero consultar los métodos propios de la API con tus datos.

//Se ejecuta la función al cargar la pagina
$(document).ready(function() {
  //Se realiza la consulta de los productos (en tu caso con ajax)
  let productos = [{
      "id": 1,
      "producto": "Botella",
      "precio": 1,
      "precio2": 8
    },
    {
      "id": 2,
      "producto": "Libro",
      "precio": 4,
      "precio2": 4
    },
  ];
  //Poblar la tabla
  let tabla = $("#tabla").DataTable({
    pageLength: 10,
    rowId: 'id',
    data: productos,
    columns: [{
        title: 'Producto',
        width: '8%',
        data: 'producto',
        defaultContent: "",
        name: 'producto',
        orderable: true,
        searchable: true,
        visible: true
      },
      {
        title: 'precio',
        width: '8%',
        data: 'precio',
        defaultContent: "",
        name: 'precio',
        orderable: true,
        searchable: true,
        visible: true
      },
      {
        title: 'Precio Lista',
        width: '8%',
        data: 'precio2',
        defaultContent: "",
        name: 'precio2',
        orderable: true,
        searchable: true,
        visible: true
      },
    ],
    order: [
      [0, 'desc']
    ],
  });
  //Ejecutar la función para calcular los totales enviando como argumento el objeto con los productos
  calcularTotales(productos);
});

//Declarar una nueva función que recibe como parámetro el objeto con los productos
function calcularTotales(productos) {
  //Inicializar variables
  let tabla = $("#tabla").DataTable();
  let totalPrecio = 0;
  let totalPrecio2 = 0;
  //Recorrer los datos para calcular los totales
  productos.forEach(function(item, index) {
    totalPrecio += item.precio;
    totalPrecio2 += item.precio2;
  });
  //Usar el método .append() de jQuery para agregar la fila al final
  let totales = `<tr>
    <td><b>Total</b></td>
    <td><b>${totalPrecio}</b></td>
    <td><b>${totalPrecio2}</b></td>
  </tr>`;
  //Agregar la fila al final de la tabla
  $("#tabla").append(totales);
};
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

<table id="tabla" class="display" style="width:100%"></table>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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