Complex Header

marianidiego · November 14

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

kthorngren · November 14

Likely the issue is that Datatables reads the header during initialization and stores it as part of the config. You are updating the header after initialization which Datatables doesn't know about. Make sure the header config is complete before initializing Datatatbles.

Kevin

allan · November 14

Yup - it is exactly as Kevin says. DataTables caches the header structure as it is initialised. There is currently no API to update that cache - you need to have the header as you want (and the footer if you have one) when the table is initialised.

Allan

marianidiego · November 14

Interesting.
How can I properly “initialize” a complex header?

I remember that there is a lot of data, so the option “serverSide: true” is very interesting.

Thanks for your help.

kthorngren · November 14

Maybe move your code, lines 63-135, before the Datatables initialization on line 3.

Kevin

marianidiego · November 19

I solved it this way:
- removed all responsive functions
- Removed the Scroll- function.
- Put the table in a DIV
- And constrolled the Scroll of the DIV

kthorngren · November 19

Sounds like the problem maybe have been more than just how to initialize a complex header. You shouldn't need to do what you did for scrolling and responsive to work. Maybe you can provide details of the issue you are having because both of those should work properly if you have initialized the complex header first and are using the latest 2.x version of Datatables.

Can yo provide a simple test case showing the issues so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

See this Responsive with complex headers example.

Kevin

Complex Header

Complex Header

Answers

Howdy, Stranger!

Categories

DataTables

Complex Header

Complex Header

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables