Directions ...

Entai

Hi, I am having some troubles, this code is getting me crazy ... I need to get the totals at the bottom of the table, and every time the table is filtered (Searched) that amounts must display the current totals.
Other thing I am seeking is to modular add the code to the table, initialize the buttons and other things from outside the var table, and make a lot of mistakes trying to do that ...
I will copy all the code below, please dont roast me

<script>
    $(document).ready(function () {
    
    var table = $('#listado').DataTable({
      "destroy":true,
      "scrollX":true,
      "colReorder":true,
      "language": idioma_espanol,
      "dom":  "<'row'<'col-sm-6'B><'col-sm-6'f>>" +
              "<'row'<'col-sm-12'tr>>" +
              "<'row'<'col-sm-5'l><'col-sm-7'p>>" +
              "<'row'<'col-sm-6'i>>",
      "buttons":[
      {
        text: '<i class="fas fa-user-plus"></i><p class="tituloboton"> Nuevo</p>',
        className: 'btn btn-block btn-outline-primary btn-sm h31 w43 w120ib',
        action: function (e, node, config){
          $("#contenidomodal").load("<?php echo base_url().'mutual/add';?>");
          $('#modalbase').modal({backdrop: 'static', keyboard: false});
        }        
      },
      {
        extend: 'collection',
        text: '<i class="fas fa-file-export" aria-hidden="true"></i><p class="tituloboton"> Exportar</p>',
        className: 'btn btn-block btn-outline-primary btn-sm h31 w43 w120ib',
        buttons: [
          {
            extend: 'excelHtml5',
            exportOptions: {
              columns: ':visible'
            },
            text:   '<i class="far text-success fa-file-excel"></i> Excel',
            titleAttr: 'Exportar a Excel'
          },
          {
            extend: 'pdfHtml5',
            exportOptions: {
              columns: ':visible'
            },
            text: '<i class="far text-danger fa-file-pdf"></i> PDF',
            titleAttr: 'Exportar a PDF',
          },
          {
            extend: 'copyHtml5',
            text: '<i class="far fa-copy"></i> Copiar',
            exportOptions: {
              modifier: {
                page: 'current'
              }
            },
            titleAttr: 'Copiar a la papelera'
          },
        ]
      },
      {
        extend: 'print',
        title:"",
        exportOptions: {
          columns: [ 0, 1, 2, 3, 4, 5, 6, 7]
        },
        className: 'btn btn-block btn-outline-primary printbutton btn-sm h31 w43 w120ib',
        text: '<i class="fas fa-print"></i><p class="tituloboton"> Imprimir</p>',
        titleAttr: 'Imprimir',
        customize: function (win) {
          $(win.document.body)
            .css('font-size', '10pt')
          $(win.document.body).find('table')
            .addClass('compact')
            .css('font-size', 'inherit' );
          $(win.document.body).find('td')
            .css('padding','2px');
          $(win.document.body).find('thead')
            .prepend('<th colspan="8" style="text-align:center;font-size: 20px;"><b>ASOCIACION </b> - LISTADO DE SOCIOS</th>');
          $(win.document.body).find('table')
            .append('<th id="totalesfinalpagina" colspan="8" style="text-align:center;">'+totales()+'</th>');
        }
      },
      ],
      "autoWidth": true,
      
    });

    function totales() { 
      var titulares = 0;
      var masculinos = 0;
      var femeninos = 0;
      var familiares = 0;
      table.rows().data().each(function(el, index){
        if (el[9] == 0) {
          titulares += 1;
          if (el[8].indexOf("Masculino")) {
            masculinos += 1;
          } else if (el[8].indexOf("Femeninos")) {
            femeninos += 1;
          }
        } else {
          familiares += 1;
        }

      });
      return ("Total Socios Masculinos: "+masculinos+" - Total Socios Femeninos: "+femeninos+" - Total a Cargo: "+familiares+" - TOTAL SOCIOS: "+(masculinos+femeninos+familiares));
    }
  });
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @Entai ,

This example here may help, I think it's doing what you want. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Entai

Thx Colin! that help me ... but still cannot get it working ... how I get the function in my code-> totales() <- to run in the callback?!

The column 9 (starting from 0) has a value 0 or 1, I must count all the 0 (titulares) and all the 1 (acargo), and then if column 8 has value "Femeninos" and "Masculinos" count that on other two variables to show at the footer (showed at the return of the function)