2

Necesito sumar todas las celdas de una columna de Datatable, he probado varias formas pero aun no he logrado conseguir que funcione, lo mas cercano ha sido:

for (var i = 1; i <= nume1; i++) {
                        total += Number(todos.rows[i].cells[5].innerHTML); 
}

pero solo suma las celdas de la columna 5 de la página actual y lo que quiero es sumar en todas las páginas.

<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">&#xE5D2;</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>

el problema es cuando se llama a la funcion totales, en esta se suman las celdas correspondientes a la columna 5 de las filas que estan en la pagina mostrada del datatable y lo que requiero es que se sumes las celdas en todas las paginas, tanto la que se muestra como las que estan ocultas...

2
  • 2
    Te doy la bienvenida csjo a SOes y te invito a que hagas una visita por el recorrido. Añade el código de como generas tu datatable. Commented el 18 abr. 2018 a las 15:44
  • Hola, gracias por responder, ya he subido el codigo de como se genera el datatable.... @bercklynCarlosviza
    – csjo
    Commented el 18 abr. 2018 a las 16:11

3 respuestas 3

2

Puedes usar la función rows para acceder a todas tus filas del objeto DataTable y a data para todos los datos indistintamente de en que página estes. Es decir:

var total = 0;
$('#todos').DataTable().rows().data().each(function(el, index){
  //Asumiendo que es la columna 5 de cada fila la que quieres agregar a la sumatoria
  total += el[5];
});
console.log(total);
4
  • gracias por responder @Dariel Ramos Díaz de Villegas implemente la solucion que propones mostrando el resultado en alguna parte de la pantalla, y lo que muestra es algo como 0100010001000100010001000, osea que si hay 8 filas que en la celda 5 tienen un valor de 1000 me muestra 8 veces 1000 pero no la sumatoria de las columnas "8000", que puedo hacer para que solo muestre la sumatoria????
    – csjo
    Commented el 18 abr. 2018 a las 16:53
  • intenta con poner total += parseInt(el[5]); Commented el 18 abr. 2018 a las 17:07
  • Esta perfecto asi, muchas gracias @Dariel Ramos Díaz de Villegas
    – csjo
    Commented el 18 abr. 2018 a las 18:11
  • OKOK me alegro. Saludos Commented el 18 abr. 2018 a las 18:20
2

Otra manera es utilizando el callback footerCallback

Puedes hacerlo de la siguiente manera:

$(document).ready(function() {
    $('#example').DataTable( {
        "pageLength": 4,
        "footerCallback": function ( row, data, start, end, display ) {
        
            total = this.api()
                .column(1)//numero de columna a sumar
                //.column(1, {page: 'current'})//para sumar solo la pagina actual
                .data()
                .reduce(function (a, b) {
                    return parseInt(a) + parseInt(b);
                }, 0 );

            $(this.api().column(1).footer()).html(total);
            
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">
 <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Valor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Prueba</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>40</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>60</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>70</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Prueba</td>
                <td>90</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>Total:</th>
            </tr>
        </tfoot>
    </table>

1
  • Si hubiera Prueba1 y Prueba2 como podria sumar por ejemplo solo de prueba1 por un lado y prueba2 por otro Commented el 12 dic. 2018 a las 21:36
1

Para recorrer los elementos de un DataTableJS lo mejor es usar la funcion de iterator(), ya que este lo hace independientemente si tiene paginación o no, o cualquier configuración de tu tabla.

function getTblTotal() {
    let total = 0,
        todos = $("#todos").Datatable();
    todos.rows().iterator('row', function (context, index) {
        let node = $(this.row(index).node());
        total += +(node.find('td').eq(5))
    });
    return total;
}

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.