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>