Fixed Header not working

leefa

https://codepen.io/Leefa/pen/XJrgzWg

I can't get Fixed Header to work for me. I've include all the plugins/extensions I think. No idea what the problem is. I'm using bootsrap 4 too

                    var table = new DataTable('#' + tbn, {
                        stripeClasses: [],
                        //paging: false,
                        lengthMenu: [{label: 'All', value: -1}, 10, 25, 50],
                        info: false,
                        ordering: false,
                        fixedHeader: {header: true,footer: true},
                        //buttons: ['excel', 'print','pdf'],
                        layout: {
                            topStart: ['search', 'pageLength'], topEnd: {
                                buttons: [
                                    {extend: 'excelHtml5',title: title},
                                    {extend: 'spacer'},
                                    {extend: 'pdfHtml5',title: title}
                                ]
                            }, bottom: null,
                        },
                        //scrollCollapse: true,
                        //scrollY: '50vh',
                        //lengthMenu: [{label: 'All', value: -1}, 10, 25, 50],
                        columns: columns,
                        data: data,
                        rowGroup: {
                            startRender: function (rows, group) {
                                var collapsed = !!collapsedGroups[group];
                                var cl=''
                                if ((collapsed)) cl='class="collapsed"'


                                var xx='<th colspan="2"><button class=button onclick="addEmployee(\'' + group +'\')" value="+">+</button> ' + group +'</th>'

                                var trE=$('<tr/>')
                                    .append(xx)
                                    .attr('data-name', group)
                                for (var i = 2; i < monthA.length; i++) {
                                    var mo=monthA[i]
                                    var vals=rows.data().pluck(i)
                                    var sum=0
                                    for (var vi = 0; vi < vals.length; vi++) {
                                        var v = vals[vi]
                                        if (v!='') {
                                            var x= v.toString().replace(/[^0-9.-]+/g,"")
                                            sum += parseFloat(x)
                                        }
                                    }
                                    //if (sum ==0) sum=''
                                    if (mo=='Total Cost')sum = formatValue(sum,2,'Amount')
                                    if (mo=='Total Hours') {
                                        trE.append('<th class="colBorderLeft" style="text-align:right">' + sum + '</th>')
                                        if (sum==0) collapsed=true

                                    } else {
                                        trE.append('<th style="text-align:right">' + sum + '</th>')
                                    }
                                    //tr+='<th >' + monthA[i]+'</th>'

                                }
                                rows.nodes().each(function (r) {
                                    r.style.display = collapsed ? 'none' : '';
                                });
                                trE.toggleClass('collapsed', collapsed);
                                console.log(xx)
                                console.log(trE[0].outerHTML)
//                                var trE = document.createElement('tr');
//                                trE.innerHTML = tr

                                return trE;
                            },

                            dataSrc: 0
                        },
                        footerCallback: function (row, data, start, end, display) {
                            console.log(columns.length+' Columns:'+JSON.stringify(columns))
                            console.log(totalsRow.length+' Totals Row:'+JSON.stringify(totalsRow))
                            var api = this.api();

                            // Update footer
                            var f=api.column(0).footer().innerHTML = 'TOTALS'
                            api.column(0).footer()
                            for (var i = 2; i < totalsRow.length; i++) {
                                console.log(i+' footer:'+totalsRow[i])
                                console.log(i+' columns:'+columns[i])
                                var c=api.column(i)
                                var f=api.column(i).footer()
                                var v=totalsRow[i]
                                if(i==totalsRow.length-1){
                                    v=formatValue(v,2,'Amount')
                                } else {
                                    v=formatValue(v,0,'Number')
                                }
                                api.column(i).footer().innerHTML = v
                            }
                        }
                    });

leefa

It has something do do with the length menu I think. if I remove that, it works

allan

Your test case doesn't actually run DataTables - it is showing the HTML of the table once it has been already created.

Can you create a test case showing the issue where the DataTable is actually initialised in the test case please?

Allan