I need to add all the cells of a Datatable column, I have tried several ways but I have not yet managed to get it to work, the closest thing has been:
for (var i = 1; i <= nume1; i++) {
total += Number(todos.rows[i].cells[5].innerHTML);
}
but just add the cells in column 5 of the current page and what I want is to add to all the pages.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
</head>
<body>
<style>
.hideButton {
display: none !important;
}
</style>
<div id="efectivo">
<table id="todos" class="display nowrap" cellspacing="0" width="100%" style="text-transform: uppercase; font-size: 11px; text-align: center;">
<div class="contenedor2">
<ul class="nav">
<li><button style="border: none; border-radius: 100%;" class="mdl-button--primary mdl-button--raised vercolum">
<i class="material-icons iconover"></i>
</button>
<ul>
<li>
<button class="boton_ocultar_mostrardet">
<i>Locación</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Nombre dispensadora</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Serial</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Producto</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Selección</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Valor</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Costo</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Tipo de entrega</i>
</button>
</li>
<li>
<button class="boton_ocultar_mostrardet">
<i>Fecha</i>
</button>
</li>
</ul>
</li>
</ul>
</div>
<thead style="width: 100px;">
<tr>
<th>Locación</th>
<th>Nombre dispensadora</th>
<th>Serial</th>
<th>Producto</th>
<th>Selección</th>
<th>Valor</th>
<th>Costo</th>
<th>Tipo de entrega</th>
<th>Fecha</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Locación</th>
<th>Nombre dispensadora</th>
<th>Serial</th>
<th>Producto</th>
<th>Selección</th>
<th>Valor</th>
<th>Costo</th>
<th>Tipo de entrega</th>
<th>Fecha</th>
</tr>
</tfoot>
<tbody>
<?php
require_once '../ConsultasSW/DetalleTodosSW.php';
echo DetalleTodos($_POST["v1"], $_POST['v2'], $_POST['v3'], $_POST['v4']);
?>
</tbody>
</table>
<table id="cons" class="mdl-cell--1-offset" style="width: 80%; border-collapse: collapse; margin-top: 10px; text-align: center">
<thead>
<tr>
<th style="padding: 10px; width: 200px;">Cantidad de productos</th>
<th style="width: 200px">Valor total</th>
<!--<th style="width: 200px">Costo total</th>-->
</tr>
</thead>
<tbody style="border-top: 1px solid">
<tr>
<td id="can"></td>
<td id="tot"></td>
<!--<td id="cos"></td>-->
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
var nume;
var total = 0;
nume = $('#todos> tbody> tr').length; //obtiene la cantidad de filas
total = 0;
for (var i = 1; i <= nume; i++) {
total += Number(todos.rows[i].cells[5].innerHTML);
}
$("#can").html(nume);
$("#tot").html(total);
$('#todos tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="BUSCAR" />');
});
//inicia dataTable
var table = $('#todos').DataTable({
dom: 'Bfrtip',
buttons: [
{
text: 'XLS',
extend: 'excelHtml5',
className: 'Exportardetalle hideButton',
title: 'detallado TODOS',
extension: '.xls',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
className: 'Imprimirdetalle hideButton',
title: 'detallado TODOS para ' + nombreCliente,
exportOptions: {
columns: ':visible'
}
}
],
"scrollY": scroll,
"scrollX": true,
"pageLength": alto,
"responsive": true,
"order": [[8, "desc"]],
"autoWidth": true,
"language": idioma_español,
"pagingType": "full_numbers"
});
//detecta cuando de ha escrito en los input de columna y realiza filtro
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
totales();
});
});
});
</script>
<script type="text/javascript">
function totales() {
var total = 0;
var nume1 = $("#todos").DataTable().rows( {search:'applied'} ).nodes().length;
var nume2 = $('#todos> tbody> tr> td').length;
if(nume1 >= 1 && nume2 > 1){
//suma las filas totales para las columnas seleccionadas
for (var i = 1; i <= nume1; i++) {
total += Number(todos.rows[i].cells[5].innerHTML);
alert (total);
}
}
$("#can").html(nume1);
$("#tot").html(total);
}
</script>
<script src="js/FuncionesJS.js"></script>
</body>
the problem is when you call the total function, in this the cells corresponding to column 5 of the rows that are on the page shown of the datatable are added and what I require is that you add the cells in all the pages , both the one shown and the ones that are hidden ...