searchPanes not showing subtotals on select

Alessandrova

Here is my test case:
https://daado.altervista.org/avvisi_filzi_24-25.php

As you can see, when something is selected in the searchPanes, the subtotals are not shown.
I looked here for instructions but it doesn't seem to work.

Here is my script:

<script>
$(document).ready(function() {
    var dt = $('#myTable').DataTable({
      layout: {
        top1: {
          searchPanes: {
            cascadePanes: true,
            viewTotal: true
          }
        }
      },
      responsive: {
        details: {
            display: DataTable.Responsive.display.modal({
                header: function (row) {
                    var data = row.data();
                    return 'Dettagli di ' + data[1] + ' (del ' + data[0] + ')';
                }
            }),
            renderer: DataTable.Responsive.renderer.tableAll()
        }
      },
      mark: true,
      "iDisplayLength": 5,
      buttons: [
                'colvis',
                {
                    extend: 'spacer',
                    style: 'bar',
                    text: 'Esporta i dati:'
                },
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'LEGAL',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF',
                    download: 'open'
                }
      ],
      columnDefs:[
        {
          "targets": [8,13],
          "orderable": false
        },
        {        
          searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            orderable: true
          },
        }, 
        {
          searchPanes: {
            show: true
          },
          targets: [2,3,4,5,6,7,9,10,11,12]
        },
        {
          searchPanes: {
            show: false
          },
          targets: [0,1,8,13]
        }
      ],
      dom: 'Pfrtip',
      select: {
            style: 'os',
            selector: 'td:first-child'
        },
        order: [[ 0, 'desc' ]]
    });
    dt.on('select.dt', () => {          
        dt.searchPanes.rebuildPane(0, true);
    });
    dt.on('deselect.dt', () => {
        dt.searchPanes.rebuildPane(0, true);
    });
});
</script>

kthorngren

You are using both the layout and dom which layout the Datatables elements. They conflict with each other. My guess is dom: 'Pfrtip', is overriding the layout setting you have. Try removing dom: 'Pfrtip',.

Kevin

Alessandrova

Thank you for the tip. It works like a charm.