Fixed header not working on first time load(Offset Positions are not get setting properly)

Abhishek K S

Hi @allan/@colin, I am using DataTable.version = "1.10.16" FixedHeader.version = "3.1.3";

The way Datatable built based on some dropdown value selections calling ajax, it loads some 1000 records are fetched and adding those records through datatable.row.add(record[i]) then calling the datatable.draw(false) to render the table

For the first time load the tableNode offsets are coming as 0 same for thead and tbody.

Suppose if I change the Page Size or the PageNumber then the Offsets are coming correctly
means with based on calculated offsets values, if I come back to the first page the fixed header is working
not during the first time load of the table.

After debugging for long time, figured out in the below function setting positions is getting wrong. can you please help me to fix this issue.

_positions: function ()
    {
        var dt = this.s.dt;
        var table = dt.table();
        var position = this.s.position;
        var dom = this.dom;
        var tableNode = $(table.node()); // For the first time load the tableNode
//offsets are coming as 0 same for thead and tbody.
 
//Suppose if I change the Page Size or the PageNumber
//then the Offsets are coming correctly means with based on calculated offsets values,
//if I come back to the first page the fixed header
//is working not during the first time load of the table
                
        // Need to use the header and footer that are in the main table,
        // regardless of if they are clones, since they hold the positions we
        // want to measure from
        var thead = tableNode.children('thead');
        var tfoot = tableNode.children('tfoot');
        var tbody = dom.tbody;
 
        position.visible = tableNode.is(':visible');
        position.width = tableNode.outerWidth();
        position.left = tableNode.offset().left;
        position.theadTop = thead.offset().top;
        position.tbodyTop = tbody.offset().top;
        position.theadHeight = position.tbodyTop - position.theadTop;
 
        if ( tfoot.length ) {
            position.tfootTop = tfoot.offset().top;
            position.tfootBottom = position.tfootTop + tfoot.outerHeight();
            position.tfootHeight = position.tfootBottom - position.tfootTop;
        }
        else {
            position.tfootTop = position.tbodyTop + tbody.outerHeight();
            position.tfootBottom = position.tfootTop;
            position.tfootHeight = position.tfootTop;
        }
    },

colin

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

Abhishek K S

Hi @colin / @allan , as you said I created the test case here is the link to it http://live.datatables.net/howavote/4/edit ,

But it is working properly here, I noticed that when it is happening like that.
In the place where I am calling ajax function, we have common ajax GET function which is present is another JS file, when the ajax request got completed the properties become changed , please see the below details. Is there any way that i maintain the copy of the Datatable objects, tried setting this to variable but no luck.

Can you please help me to fix this issue.

Before the ajax call
offsetTop: 39
offsetLeft: 0
offsetWidth: 1933
offsetHeight: 4949

After ajax call return
offsetTop: 0
offsetLeft: 0
offsetWidth: 0
offsetHeight: 0

mpell

FWIW, I'm seeing a very similar issue where the fixed header doesn't 'stick' at the top of the page until you resize the window. While debugging, I've discovered that the d.tfootTop variable does not get updated until I resize the window.

See dataTables.fixedHeader.min.js line 286 (after pretty printing it).

Func is:

        _scroll: function(a) {
            var b = c(g).scrollTop(), e = c(g).scrollLeft(), d = this.s.position, k;
            if (this.c.header) {
                var f = this.s.enable ? !d.visible || b <= d.theadTop - this.c.headerOffset ? "in-place" : b <= d.tfootTop - d.theadHeight - this.c.headerOffset ? "in" : "below" : "in-place";
                (a || f !== this.s.headerMode) && this._modeChange(f, "header", a);
                this._horizontal("header", e)
            }
            this.c.footer && this.dom.tfoot.length && (this.s.enable && (k = !d.visible || b + d.windowHeight >= d.tfootBottom + this.c.footerOffset ? "in-place" : d.windowHeight + b > d.tbodyTop + d.tfootHeight + this.c.footerOffset ? "in" : "above"),
            (a || k !== this.s.footerMode) && this._modeChange(k, "footer", a),
            this._horizontal("footer", e))
        }

The d.tfootTop variable is updated in the update() func.

While I'm sure it's a hack, adding a.update(); to the _constructor before the a._scroll() at least hides the problem and the header 'sticks' at the top as expected:

        _constructor: function() {
            var a = this
              , b = this.s.dt;
            c(f).on("scroll" + this.s.namespace, function() {
                a.update();   //added here
                a._scroll()

Abhishek K S

@mpell Thank you so much for the above beautiful hack, it works. I appreciate it

A comment :
1) The hack affects the performance , since it get called for every scroll.

I found the mistake in code and fixed it. Your comment helped me to fix it.

mpell

@Abhishek K S Would you mind posting your fix?