Hello everyone,
I have a really big table, I use datatables just to visualize it.

Here is the code:

    $(document).ready(function() {

        fatherTable = $('#example').DataTable({

            stateSave:      false,
            serverSide:     true,
            fixedHeader:    false,
            dom:            'frtlip',
            info:           false,
            select: {
                            info: false
            },
            ajax: {
                            url: "myurl.php",
                            type: 'POST',
                            data: function ( d ) {
                                d.csrf_token = "<?=$csrf1=CSRF::generate('products')?>";
                            }
            },
            columns: [

                {   //0
                    title:      '',
                    data:       "data_ADR.data_ADR_id",
                    render:     function( data ) {return '<span class="collapse">' + data + '</span>'},
                    width:      '8px'
                },
                {   //1
                    title:      '(1)',
                    data:       "data1",
                    width:      '35px'
                },
                {   //2
                    title:      '(2)',
                    data:       "data2",
                    width:      '120px'
                },
                {   //3
                    title:      '(3a)',
                    data:       "data3",
                    width:      '35px'
                },
                ...
                {   //24
                    title:      '',
                    data:       "data24"
                }
            ],
            buttons: [                  
                'colvis' /*'copy', 'excel', 'csv',*/ 
            ],
            responsive:         false,
            **scrollx:                     true,**
            orderFixed:         [[ 1, "asc" ]],
            ordering:           false,
            paging:             true,
            lengthMenu:         [[1,5,10,100], [1,5,10,100]],
            pageLength:     10,
            lengthChange:   false,
            processing:         false,
            colReorder:         false,
            initComplete:       function( settings, json )   { 
var thead = $('#example thead');

var newRow = $('<tr>');
    newRow.append('<th data-title=""></th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1');?>"></th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T2');?>">3.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T3a');?>">2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T3b');?>">2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T4');?>">2.1.1.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T5');?>">5.2.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T6');?>">3.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T7a');?>">3.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T7b');?>">3.5.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T8');?>">4.1.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T9a');?>">4.1.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T89') . '-' .$ADMIN['lng']->t('ADR', 'T9b');?>">4.1.10</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1011') . '-' .$ADMIN['lng']->t('ADR', 'T10');?>">4.2.5.2, 7.3.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1011') . '-' .$ADMIN['lng']->t('ADR', 'T11');?>">4.2.5.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1213') . '-' .$ADMIN['lng']->t('ADR', 'T12');?>">4.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T1213') . '-' .$ADMIN['lng']->t('ADR', 'T13');?>">4.3.5, 6.8.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T14');?>">9.1.1.2</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T15');?>">1.1.3.6 (8.6)</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T16');?>">7.2.4</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T17');?>">7.3.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T18');?>">7.5.11</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T16171819') . '-' .$ADMIN['lng']->t('ADR', 'T19');?>">8.5</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T20');?>">5.3.2.3</th>');
    newRow.append('<th data-title="<?=$ADMIN['lng']->t('ADR', 'T21');?>">3.1.2</th>');
thead.prepend(newRow);

var newRow = $('<tr>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T8');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T9a');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T9b');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T10');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T11');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T12');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T13');?></th>');

    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T16');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T17');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T18');?></th>');
    newRow.append('<th><?=$ADMIN['lng']->t('ADR', 'T19');?></th>');
thead.prepend(newRow);

    var newRow = $('<tr>');
    newRow.append('<th rowspan="2"></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T1');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T2');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T3a');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T3b');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T4');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T5');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T6');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T7a');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T7b');?></th>');

    newRow.append('<th colspan="3"><?=$ADMIN['lng']->t('ADR', 'T89');?></th>');

    newRow.append('<th colspan="2"><?=$ADMIN['lng']->t('ADR', 'T1011');?></th>');

    newRow.append('<th colspan="2"><?=$ADMIN['lng']->t('ADR', 'T1213');?></th>');

    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T14');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T15');?></th>');

    newRow.append('<th colspan="4"><?=$ADMIN['lng']->t('ADR', 'T16171819');?></th>');

    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T20');?></th>');
    newRow.append('<th rowspan="2"><?=$ADMIN['lng']->t('ADR', 'T21');?></th>');
thead.prepend(newRow);





fatherTable.responsive.rebuild();
fatherTable.columns.adjust().responsive.recalc();   

                                }

        });

    });

The table was working fine. Since the header is very complex, I add a header to it in the "initComplete" function at the end of loading. The eader has 3 rows, and it has grouped elements.

Until before I added "scrollx: true", everything was working fine. By activating SCROLLX, my complex header is no longer loaded (or is removed).

Do you have any suggestions how I can load a large table, with a complex header?

I also tried the "responsive: true" function, and it would solve all my problems, the only problem is that "responsive" no longer works well when I put my 3 rows of complex header.

Nowadays, you have to make sure that the tables are viewable from the phone as well.

Ideas? Solutions?

Summarize: The problem arises from my complex header

• ScrollX non mi carica le mie tre righe di header
• Responsive non funziona bene con un header complesso