2

hola a todos estoy queriendo usar el footer call back de datatables, mire mucho pero por los diferentes tutoriales pero no logre solucionar mi problema. Entonces Como siempre toca recurrir a la sabiduria del grupo.. Este es el ejemplo de la pagina, pero no consigo q funcione, mude el nombre de mi tabla a example para q pueda correr el plugin y solo me aparece la la tabla dividida en paginas la opcion de buscar y la opcion de mostrar cuantos registros quiero tener x pagina, pero la suma q es lo q necesito no aparece.

Alguien tiene experiencia con esto?? - Desde ya muchas Gracias!!

 $('#example').DataTable( {
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 5, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 5 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

} );

Este es mi Html

<div class="box box-solid">
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-12">
                      <a href="<?php echo base_url();?>movimientos/Ventas/add_funcion" class="btn btn-primary btn-flat"><span class="fa fa-plus "></span> Nueva Venta </a>
                    </div>
                  </div>
                </div>
                <hr><!-- /.box-body -->
                <div class="row">
                  <div class="col-md-12">
                    <table id="example2" class="table table-bordered btn-hover">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Nombre Cliente:</th>
                          <th>Tipo Comprobante:</th>
                          <th>Numero de comprobante:</th>
                          <th>Fecha:</th>
                          <th>Total:</th>
                          <th>Opciones:</th>
                        </tr>
                      </thead>
                      <tbody>
                      <?php if (!empty($ventas)):?>
                        <?php foreach($ventas as $venta):?>
                          <tr>
                            <td> <?php echo $venta->id_ventas;?></td>
                            <td> <?php echo $venta->nombres_cliente;?></td>
                            <td> <?php echo $venta->tComprobante;?></td>
                            <td> <?php echo $venta->numero_comprobante_ventas;?></td>
                            <td> <?php echo $venta->fecha_ventas;?></td>
                            <td> <?php echo $venta->total_ventas;?></td>
                            <?php $dataVentas = $venta->id_ventas."*".$venta->nombres_cliente."*".$venta->tComprobante."*".$venta->fecha_ventas."*".$venta->subtotal_ventas."*".$venta->descuento_ventas."*".$venta->iva_ventas."*".$venta->total_ventas;?>
                            <td> <div class ="btn-group">
                                  <button type="button" class="btn btn-info btn-view-ventas" data-toggle="modal" 
                                      data-target="#modal-default" value="<?php echo $venta->id_ventas;?>">
                                      <span class="fa fa-search"></span>
                                  </button>
                          </tr>
                        <?php endforeach;?>
                      <?php endif;?>        
                      </tbody>
                    </table>
            </div>
            <!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
4
  • Deberias agregar tu HTML.
    – alanfcm
    Commented el 27 feb. 2019 a las 21:02
  • @alanfcm gracias x tu comentario, amigo!! ahora lo agregue.. Commented el 27 feb. 2019 a las 21:12
  • fijate que en javascript agregas otro ID distinto al de el table en html ...$('#example')..... deberia ser ...$('#example2') Commented el 27 feb. 2019 a las 21:17
  • si, ya lo había cambiado pero igual no funciona me agrega las demás características del datatable pero el footer callback no hace.. leí por ahí q tiene q tener la etiqueta <tfoot> la tablas alguna experiencia?? yo lo agregue después del <tbody> pero sigo sin nada.. Commented el 27 feb. 2019 a las 21:36

1 respuesta 1

2

Te hace falta agregar un <tfoot> a tu tabla, de otra forma el footerCallback no funciona. Quedaria asi:

$('#example').DataTable( {
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 5, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 5 ).footer() ).html(
            '$'+pageTotal
        );
    }
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></link>

<div class="box box-solid">
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-12">
                      <a href="<?php echo base_url();?>movimientos/Ventas/add_funcion" class="btn btn-primary btn-flat"><span class="fa fa-plus "></span> Nueva Venta </a>
                    </div>
                  </div>
                </div>
                <hr><!-- /.box-body -->
                <div class="row">
                  <div class="col-md-12">
                    <table id="example" class="table table-bordered btn-hover">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Nombre Cliente:</th>
                          <th>Tipo Comprobante:</th>
                          <th>Numero de comprobante:</th>
                          <th>Fecha:</th>
                          <th>Total:</th>
                          <th>Opciones:</th>
                        </tr>
                      </thead>
                      <tbody>                      
                          <tr>
                            <td> 1</td>
                            <td> juan</td>
                            <td> recibo</td>
                            <td> 1</td>
                            <td> 2/27</td>
                            <td> 100</td>                            
                            <td> <div class ="btn-group">
                              <button type="button" class="btn btn-info btn-view-ventas" data-toggle="modal" data-target="#modal-default"><span class="fa fa-search"></span>
                                  </button>
                                </div>
                            </td>
                          </tr>    
                          <tr>
                            <td> 1</td>
                            <td> juan</td>
                            <td> recibo</td>
                            <td> 1</td>
                            <td> 2/27</td>
                            <td> 100</td>                            
                            <td> <div class ="btn-group">
                              <button type="button" class="btn btn-info btn-view-ventas" data-toggle="modal" data-target="#modal-default"><span class="fa fa-search"></span>
                                  </button>
                                </div>
                            </td>
                          </tr>    
                      </tbody>
                      <tfoot>
                        <tr>
                            <th style="text-align:right">Total:</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                    </table>
            </div>
            <!-- /.box -->
        
        <!-- /.content -->
    </div>

1

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.