3

Buenas tengo una tabla en la cual salen todas las faltas de recaudación que tienen los trabajadores de mi empresa, el listado esta agrupado por trabajador, es decir sale el nombre del trabajador, la fecha y cada una de las faltas que tiene.

El caso es que cuando filtre por mes, quiero que me salgan la fila que agrupa el nombre, fecha, y el total de las faltas de recaudación.

Me sale todo menos la fecha, y el orden me salen los registros de cada trabajador, y luego la agrupación, y tampoco se como hacer para que se impriman solo las filas agrupadas, para que no sea tan amplio el informe por mes por ejemplo.

<html>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        },
        th { white-space: nowrap; }
    </style>
</html>
<?php

require_once('../Conection.php');

$conection = Conection::getConection();

$recaudaciones=[];
$query="SELECT Nombre,CodBus, CodTrabajador,Fecha,Importe,Observaciones,CodFalta FROM faltarecaudacion INNER JOIN trabajadores ON Codigotrab=CodTrabajador ";
$result = mysqli_query($conection, $query);

while($row = mysqli_fetch_assoc($result)) {
    $recaudaciones[]=array(
        "CodFalta"=>$row['CodFalta'],
        "CodBus"=>$row['CodBus'],
        "CodTrabajador"=>$row['CodTrabajador'],
        "Fecha"=>$row['Fecha'],
        "Importe"=>$row['Importe'],
        "Observaciones"=>$row['Observaciones'],
        "Nombre"=>$row['Nombre']
    );
}
$query2="SELECT CodTrabajador, SUM(Importe) FROM `faltarecaudacion` GROUP BY CodTrabajador";
$result2 = mysqli_query($conection, $query2);
while($row = mysqli_fetch_assoc($result2)) {
    $totales[]=array(
        "CodTrabajador"=>$row['CodTrabajador'],
        "Total"=>$row['SUM(Importe)']
    );
}
echo "<table id='recaudaciones' class='display' style='width: 100%'>
        <thead>
            <tr>
                <th>CODIGO BUS</th>
                <th>CODIGO TRABAJADOR</th>
                <th>FECHA</th>
                <th>IMPORTE</th>
                <th>OBSERVACIONES</th>
                <th>OPCIONES</th>
            </tr>
        </thead><tbody>";
                if(!empty($recaudaciones)) {
                    foreach ($recaudaciones as $i) {  //Iteramos tu objeto
                        $tds = ""; //Inicmaos variable tds
                        $tds .= "<td>" . $i['CodBus'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        $tds .= "<td>" . $i['CodTrabajador'] ." - ".$i['Nombre']. "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        $tds .= "<td>" . date("d-m-Y",strtotime($i['Fecha'])) . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        $tds .= "<td>" . $i['Importe']*-1 . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        $tds .= "<td>" . $i['Observaciones'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        $codigo=$i['CodFalta'];
                        $tds .= "<td>" ."<span valor=$codigo>" ."<img class='borrable' src='../img/borrar.png' style='margin-left: 50%'>". "</span></td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
                        echo "<tr>" . $tds . "</tr>"; // Imprimimos el resultado final
                    }
                }
            ?>
        </tbody>
        <tfoot>
            <tr>
                <th style="text-align:right">Total:</th>
                <th></th>
                <th></th>
                <th id="total"></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        </table>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

    <script src="../js/tablerecaudacion.js"></script>

 var groupColumn = 1;
    var table = $('#partes').DataTable({
        "processing": true,
        "autowidth": true,
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="12">'+group+'</td></tr>'
                    );
                    last = group;
                }
            } );
        },
        dom: 'Bfrtip',
        buttons: [
            {extend:'print',text: "Imprimir",title: "Partes de los Trabajadores",footer:true },
            {extend:'excel',text: "Exportar Excel",title: "Partes de los Trabajadores" },
            {extend:'pdf',text: "Exportar PDF",title: "Partes de los Trabajadores"},
            {extend:'copy',text: "Copiar portapapeles",title: "Partes de los Trabajadores"}
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        }
    } );

Alguien sabe como meterle mano?

El resultado deseado es el siguiente mas o menos luego ya daría yo formato: introducir la descripción de la imagen aquí

Esto es lo que sale:

introducir la descripción de la imagen aquí

2
  • Hola, creo que se necesita ver el código HTML del problema. Commented el 4 oct. 2019 a las 10:07
  • @the-breaker ahora mismo lo añador a la pregunta
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 10:54

2 respuestas 2

2

Para que realice la suma total de los importes, puedes agregar código que verifique si es la ultima fila del grupo para agregar la fila del total y el código que acumula la suma en la función que agrega los nombres de grupo.

A grandes rasgos se siguen los siguientes pasos:

  • Para obtener la cantidad de filas se crea la variable filas.

  • Por cada fila se va acumulando el total de la celda importe hasta que se verifique que ya se paso al siguiente grupo.

  • De ser así se agrega la fila del total al final con after() y se reinicia el total en 0.

  • Para terminar se verifica si la fila es la ultima para agregar el ultimo total.

Y así el código queda funcionando (espera a que se carguen las librerías para ver el resultado):

var groupColumn = 1;
var table = $('#partes').DataTable({
        "processing": true,
        "autowidth": true,
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
            var total=0;
            var filas = api.column(groupColumn, {page:'current'} ).data();
            
            filas.each( function ( group, i ) {
                
                if ( last !== group ) {
                  if(last!=null){
                    $(rows).eq( i - 1).after(
                        `<tr class="total"><td colspan=2>Total:</td><td colspan="10">${ total }</td></tr>`
                    );
                    total=0;
                  }
                  $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="12">'+group+'</td></tr>'
                  );

                  last = group;
                }
                total+=+$(rows).eq( i ).children()[2].textContent;
                if(i==filas.length-1){
                    $(rows).eq( i ).after(
                        `<tr class="total"><td colspan=2>Total:</td><td colspan="10">${ total }</td></tr>`
                    );
                }
            });
        },
        dom: 'Bfrtip',
        buttons: [
            {extend:'print',text: "Imprimir",title: "Partes de los Trabajadores",footer:true },
            {extend:'excel',text: "Exportar Excel",title: "Partes de los Trabajadores" },
            {extend:'pdf',text: "Exportar PDF",title: "Partes de los Trabajadores"},
            {extend:'copy',text: "Copiar portapapeles",title: "Partes de los Trabajadores"}
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        }
    } );
tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        },
        th { white-space: nowrap; }
        tr.total {
          background-color: #ddf !important;
        }
<html>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
</html>

<table id='partes' class='display' style='width: 100%'>
        <thead>
            <tr>
                <th>CODIGO BUS</th>
                <th>CODIGO TRABAJADOR</th>
                <th>FECHA</th>
                <th>IMPORTE</th>
                <th>OBSERVACIONES</th>
                <th>OPCIONES</th>
            </tr>
        </thead><tbody>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>25/06/2019</td>
            <td>45</td>
            <td>sin obs.</td>
            <td><span valor='codf1'><img class='borrable' src='.../img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>27/06/2019</td>
            <td>25</td>
            <td>sin obs.</td>
            <td><span valor='codf2'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus2</td>
            <td>T2 - Juan Lopez</td>
            <td>25/06/2019</td>
            <td>35</td>
            <td>sin obs.</td>
            <td><span valor='codf3'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>29/06/2019</td>
            <td>35</td>
            <td>sin obs.</td>
            <td><span valor='codf4'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus2</td>
            <td>T2 - Juan Lopez</td>
            <td>31/06/2019</td>
            <td>30</td>
            <td>sin obs.</td>
            <td><span valor='codf5'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
        </tbody>  
        <tfoot>
            <tr>
                <th style="text-align:right">Total:</th>
                <th></th>
                <th></th>
                <th id="total"></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        </table>
    <script src="https://cdnjs.cloudflare.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>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

De esa forma ya funciona como esperas, saludos.

7
  • Buenas, muchas gracias por la respuesta, es casi lo que necesito yo quiero que salga el en la fila por ejemplo T1 - Jose perez Fecha : fecha y total :29 por ejemplo no uno arriba y otro al pie y luego al imprimir solo se imprima el la fila por la que esta agrupada, voy a probar a modificarlo yo a ver si atino muchas Gracias!!!
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 15:03
  • @KeTeMeTo ¿quieres agrupar por trabajador y fecha? creo que puedo resolverlo, respecto a imprimir la tabla, habría que investigarlo pero eso haría muy amplia la pregunta. Commented el 4 oct. 2019 a las 15:34
  • imprimir la tabla ya he averiguado como, (creo) lo que quiero es que agrupa por trabajador y en el pie de pagina sale total y el total, yo quiero que todo salga en la primera linea osea $(rows).eq( i ).before( '<tr class="group"><td colspan="2">'+group+'</td><td colspan=2>Total:</td><td colspan="1">${ total }</td></tr>' ); pero no me funciona porque no detecta ${total} osea que me imprime ${total} en texto
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 15:41
  • @KeTeMeTo creo que puede resolverse, pero para evitar confusiones podrías agregar una imagen (puedes hacer una captura de excel) de como esperas que se vea la tabla. Commented el 4 oct. 2019 a las 15:46
  • si el código tiene que sea muy parecido al que tu me has pasado, simplemente creo que cambiando la posición pero no doy con la tecla, ya tienes subida la imagen
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 15:50
0

Acotando a la respuesta anterior, para agrupar las filas de modo que se muestre el total en la misma fila del nombre de grupo deben hacerse los siguientes cambios:

  • Se agregan las filas de total antes del grupo con before() por cada grupo.

  • Se guarda en una variable lasti el indice de la primera fila del grupo.

  • Debe agregarse también para el ultimo grupo.

var groupColumn = 1;
    var table = $('#partes').DataTable({
        "processing": true,
        "autowidth": true,
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
            var total=0;
            var filas = api.column(groupColumn, {page:'current'} ).data();
            var lasti = 0;
            
            filas.each( function ( group, i ) {
                
                if ( last !== group && last!=null){
                    $(rows).eq(0).before(
                        '<tr class="group"><td colspan="2">'+last+'</td><td >Total: '+total+' €</td><td colspan="9"></td></tr>'
                    );
                    total=0;
                    lasti=i;
                  }
                  total+=+$(rows).eq( i ).children()[2].textContent;
                  if(i == filas.length-1){
                    $(rows).eq(lasti).before(
                        '<tr class="group"><td colspan="2">'+last+'</td><td >Total: '+total+' €</td><td colspan="9"></td></tr>'
                    );
                  }
                  last = group;
                  
            });
        },
        dom: 'Bfrtip',
        buttons: [
            {extend:'print',text: "Imprimir",title: "Partes de los Trabajadores",footer:true },
            {extend:'excel',text: "Exportar Excel",title: "Partes de los Trabajadores" },
            // {extend:'pdf',text: "",
            {extend:'copy',text: "Copiar portapapeles",title: "Partes de los Trabajadores"},
            {extend: 'pdf', 
                    text:'Exportar PDF',
                    footer : true,
                    header : true,
                    title: "Partes de los Trabajadores",
                    orientation:'portrait',
                    customize: function (doc) {
                        var lastColX=null;
                        var lastColY=null;
                        var bod = []; // this will become our new body (an array of arrays(lines))
                        //Loop over all lines in the table
                        doc.content[1].table.body.forEach(function(line, i){
                            //Group based on first column (ignore empty cells)
                            /*if(lastColX != line[0].text && line[0].text != ''){
                                //Add line with group header
                                bod.push([{text:line[0].text, style:'tableHeader'},'','','','']);
                                //Update last
                                lastColX=line[0].text;
                            }*/
                            //Group based on second column (ignore empty cells) with different styling
                            if(lastColY != line[1].text && line[1].text != ''){
                                //Add line with group header
                                bod.push(['',{text:line[1].text, style:'subheader'},'','','']);
                                //Update last
                                lastColY=line[1].text;
                            }
                            //Add line with data except grouped data
                            if( i < doc.content[1].table.body.length-1){
                                bod.push(['','',{text:line[2].text, style:'defaultStyle'},
                                                {text:line[3].text, style:'defaultStyle'},
                                                {text:line[4].text, style:'defaultStyle'}]);   
                            }
                            //Make last line bold, blue and a bit larger
                            else{
                                bod.push(['','',{text:line[2].text, style:'lastLine'},
                                            {text:line[3].text, style:'lastLine'},
                                            {text:line[4].text, style:'lastLine'}]);
                            }
                             
                        });
                        //Overwrite the old table body with the new one.
                        doc.content[1].table.headerRows = 3;
                        doc.content[1].table.widths = [50, 50, 150, 100, 100];
                        doc.content[1].table.body = bod;
                        doc.content[1].layout = 'lightHorizontalLines';
                         
                        doc.styles = {
                            subheader: {
                                fontSize: 10,
                                bold: true,
                                color: 'black'
                            },
                            tableHeader: {
                                bold: true,
                                fontSize: 10.5,
                                color: 'black'
                            },
                            lastLine: {
                                bold: true,
                                fontSize: 11,
                                color: 'blue'
                            },
                            defaultStyle: {
                            fontSize: 10,
                            color: 'black'
                            }
                        }
                    }
                }
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        }
    } );
tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        },
        th { white-space: nowrap; }
        tr.total {
          background-color: #ddf !important;
        }
<html>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
</html>

<table id='partes' class='display' style='width: 100%'>
        <thead>
            <tr>
                <th>CODIGO BUS</th>
                <th>CODIGO TRABAJADOR</th>
                <th>FECHA</th>
                <th>IMPORTE</th>
                <th>OBSERVACIONES</th>
                <th>OPCIONES</th>
            </tr>
        </thead><tbody>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>25/06/2019</td>
            <td>45</td>
            <td>sin obs.</td>
            <td><span valor='codf1'><img class='borrable' src='.../img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>27/06/2019</td>
            <td>25</td>
            <td>sin obs.</td>
            <td><span valor='codf2'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus2</td>
            <td>T2 - Juan Lopez</td>
            <td>25/06/2019</td>
            <td>35</td>
            <td>sin obs.</td>
            <td><span valor='codf3'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus1</td>
            <td>T1 - Jose Perez</td>
            <td>29/06/2019</td>
            <td>35</td>
            <td>sin obs.</td>
            <td><span valor='codf4'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
          <tr>
            <td>CodBus2</td>
            <td>T2 - Juan Lopez</td>
            <td>31/06/2019</td>
            <td>30</td>
            <td>sin obs.</td>
            <td><span valor='codf5'><img class='borrable' src='img/borrar.png' style='margin-left: 50%'></span></td>
          </tr>
        </tbody>  
        <tfoot>
            <tr>
                <th style="text-align:right">Total:</th>
                <th></th>
                <th></th>
                <th id="total"></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        </table>
    <script src="https://cdnjs.cloudflare.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>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

Respecto a mostrar los datos agrupados al exportar en PDF halle un código bastante util en el siguiente enlace (el código fue agregado también a la respuesta y funciona):

https://datatables.net/forums/discussion/32120/how-to-print-a-table-with-row-grouping

Saludos.

6
  • eres un maquina, muchisimas gracias por la ayuda, pero me los agrupa todos al principio y luego me muestra los registros, no el agrupado y luego sus registros, ahora subo la foto! y muchas gracias de verdad, ya no te molesto mas, me has ayudado mucho ya me caliento yo a ver como puedo sacarlo!
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 17:10
  • @KeTeMeTo de nada, si es mucho trabajo. indícame cuando logres el resultado que esperas. Commented el 4 oct. 2019 a las 17:15
  • perfecto muchas gracias de nuevo!
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 17:16
  • ya lo he conseguido simplemente la variable lasti la he convertido en un contador y en el $(rows).eq(i).before(......) le paso la variable lasti al eq y listo ya funciona! eres un makina!
    – KeTeMeTo
    Commented el 4 oct. 2019 a las 17:21
  • 1
    @KeTeMeTo felicidades!. Commented el 4 oct. 2019 a las 17:22

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.