0

Tengo una DataTable con ciertas columnas, una de ellas es Cantidad.
Esta columna se me ha pedido realizar una totalización, lo cual es simple el contar todas las filas y sumarlas. Pero MI complicación viene con los detalles.

Debe contabilizarse incluso usando el filtro de búsqueda, y descontando los equipos con estado ANULADO.

Ya he intentado totalizar, pero no logro aplicarlo sobre el filtro además.

Entonces lo que necesito, es un modo de realizar la totalización en tiempo real, de modo que si aplico algún filtro sobre la tabla, la totalización cambie y recalcule todo.

Mi código es el siguiente:

$(document).ready(function() {
  var table = $('#general').DataTable();
  $('#general tbody').on('click', 'tr', function() {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  });
});
<head
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<table id="general">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Estado</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ANULADO</td>
      <td>1</td>
    </tr>
    <tr>
      <td>EDUARDO TARANTINO</td>
      <td>ACTIVO</td>
      <td>2</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ACTIVO</td>
      <td>1</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ACTIVO</td>
      <td>3</td>
    </tr>
    <tr>
      <td>EDUARDO TARANTINO</td>
      <td>ANULADO</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfooter>
    <tr>
      <td></td>
      <td>TOTAL:</td>
      <td>ACAVAELTOTAL</td>
    </tr>
  </tfooter>
  <script>
    $(document).ready(function() {
      $('#general').DataTable({
        dom: 'f'
      });
    });
  </script>
</table>

2
  • 1
    ¿No te sirve el evento search? Commented el 26 oct. 2021 a las 21:48
  • @JonatanLavado Veré si me funciona para lo que quiero.
    – Excorpion
    Commented el 28 oct. 2021 a las 0:43

1 respuesta 1

1

La solución es usar drawCallback para sumar, te dejo un ejemplo de tu mismo código

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<table id="general">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Estado</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ANULADO</td>
      <td>1</td>
    </tr>
    <tr>
      <td>EDUARDO TARANTINO</td>
      <td>ACTIVO</td>
      <td>2</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ACTIVO</td>
      <td>1</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>ACTIVO</td>
      <td>3</td>
    </tr>
    <tr>
      <td>EDUARDO TARANTINO</td>
      <td>ANULADO</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfooter>
    <tr>
      <td></td>
      <td>TOTAL:</td>
      <td id="total">0</td>
    </tr>
  </tfooter>
  <script>

function mostrar()
{
    $('#general tbody').on('click', 'tr', function() {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
    });
}


var table=$('#general').dataTable( {
    "drawCallback": function( settings  ) {
        var e=settings.nTBody.rows;
        $("#total").html("");
        var total=0;
        for (var i = 0; i < e.length; i++) {
            var a=e[i]["innerText"];
                var porciones = a.split("\t");
                var total=total+parseFloat(porciones[2]);               
        }
        $("#total").html(total);
      mostrar();
    }
} );


    
  </script>
</table>  

Te dará como resultado algo así:

introducir la descripción de la imagen aquí

Recuerda que debes reiniciar el total cada que realices una búsqueda o filtrar por lo que deseas

Para Filtrar por lo que deseas para sumar solo los activos colocas una condición dentro del drawCallback

$('#general').dataTable( {
    "drawCallback": function( settings  ) {
        var e=settings.nTBody.rows;
        $("#total").html("");
        var total=0;
        for (var i = 0; i < e.length; i++) {
            var a=e[i]["innerText"];
                var porciones = a.split("\t");
                var total=total+parseFloat(porciones[2]);               
        }
        $("#total").html(total);
    }
} );

Llamas así a al Datatable y cada que cambies borrara la cuenta y volverá a sumar.

17
  • Recuerda reiniciar tu suma cada que busques o hagas un filtro, pero ya son detalles que puedes mejorar, ya tienes la lógica Commented el 28 oct. 2021 a las 13:44
  • Ya te hago un ejemplo Commented el 28 oct. 2021 a las 14:57
  • Verifica el ejemplo que te puse Commented el 28 oct. 2021 a las 14:58
  • Debes borrar todo datatable, osea con ese llamas al datatable y con ese mismo sumas Commented el 28 oct. 2021 a las 15:10
  • Como este ejemplo: jsfiddle.net/afrv7eok Commented el 28 oct. 2021 a las 15:11

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.