While changing table height, how to update "Showing x to y of z entries" values ?

Elfayer

I'm editing the height of my dataTables after it's been rendered. But I can't find a way to update the table informations correctly at this point. Also, I'm using scroller and it gives issues like not showing the last line of the tables while at the end of the scroll. I think it's due to the same problem.

Here is what I'm doing :

ds.browse.dataTable = $("#browseTable").dataTable({
        "jQueryUI": true,
        "deferRender": true,
        "scrollY": "1px",
        "scrollX": true,
        "dom": '<"H"fr>t<"F"iS>',
        "renderer": "bootstrap",
        "scroller": {
            "loadingIndicator": true
        },
        "columns": function() {
            var arr = $.map(attributesList, function(attribute) {
                return {"sTitle": attribute["name"],
                        "className": attribute["css"]
                };
            });
            arr.unshift({ "bVisible": false });
            return (arr);
        }(),
        "data": function() {

            return $.map(localInstances, function(instance) {
                var arr = new Array();

                arr.push(instance.url);
                for (var i in instance.properties) {
                    arr.push(instance.properties[i].values);
                }
                return [arr];
            });
        }()
    });

    $(".dataTables_scrollBody").height($("#timeline").offset().top - $("#browseTable").offset().top - 37);
    ds.browse.dataTable.fnSettings().oScroll.sY = $("#timeline").offset().top - $("#browseTable").offset().top - 37; 
    ds.browse.dataTable.fnDraw();

    $(window).resize(function () {
        $(".dataTables_scrollBody").height($("#timeline").offset().top - $("#browseTable").offset().top - 37);
        ds.browse.dataTable.fnSettings().oScroll.sY = $("#timeline").offset().top - $("#browseTable").offset().top - 37; 
        ds.browse.dataTable.fnDraw();
    });

The height while resizing is correct, it's just the informations that are wrong (not changed). Currently it's showing : "Showing 1 to 1 of 16 entries" after creation and it should write : "Showing 1 to 7 of 16 entries".
What am I doing wrong ?

allan

Can you please link to a test case showing the problem.

You probably need to have Scroller update the information, but then I would have thought a draw would do that... So yes, I'd need to be able to see it at the very least to be able to offer any help. I should also point out that settings values in fnSettings() is not supported. There is no public API for setting the scrolling height at the moment - you might get away with this, you might not - it isn't support :-)

Allan

Elfayer

I simplified the problem here, but you can see the problem : http://jsfiddle.net/WwDg8/388/

allan

Thanks for the test case - it illustrates nicely the problem with changing internal properties externally :-).

You need to tell Scroller that the dimensions of the scrolling container have changed. You can do this with its fnMeasure method. Updated example.

Allan

Elfayer

Hmm, too bad, it seemed easy^^, but doing this in my code makes : "Showing NaN to 16 of 16 entries" and the data looks "Loading...". The only difference I see is that I don't load the data from HTML code but with "data" and "columns" attributes of dataTable(). Do you have an idea why I have a different beharvior ?

EDIT : Here is the function code : (sorry for the display, I have issues to display the code properly)

"fnMeasure": function ( bRedraw )

{

if ( this.s.autoHeight )

{

this._fnCalcRowHeight();

}

var heights = this.s.heights;

heights.viewport = $(this.dom.scroller).height();

this.s.viewportRows = parseInt( heights.viewport / heights.row, 10 )+1; // this.s.viewportRows = NaN because heights.row = 0

this.s.dt._iDisplayLength = this.s.viewportRows * this.s.displayBuffer; // this.s.dt._iDisplayLength = NaN

if ( typeof bRedraw == 'undefined' || bRedraw )

{

this.s.dt.oInstance.fnDraw();

}

}

Elfayer

this.s.heights.row = $('tr', tbody).eq(1).outerHeight(); // in "_fnCalcRowHeight" l.860

This line return 0.

Elfayer

I found something.

In dataTables.scroller.js, line 860 :

this.s.heights.row = $('tr', tbody).eq(1).outerHeight();

When I replace like below it works :

this.s.heights.row = $('tr', "tbody").eq(1).outerHeight(); // note the quotes between tbody

allan

Is the table hidden when you initialise it? That would cause the calculated height to be 0 (since it has no height!). You need to measure it again when it is made visible.

Allan

Elfayer

Doesn't seem so. I have 3 table tag in my console firebug, one for the header, one for the data and the last one is commented. The two firsts are from dataTable.

Elfayer

Looks like also that I don't have any tr tag in tbody after calling fnMeasure, it's empty. That explain the "Loading..." inside the table. Whereas I had tr tags in the tbody before calling fnMeasure.

The table and its data is displaying correctly. It's juste that I have "Showing 1 to 1 of 16 entries" which is wrong and when I call fnMeasure it shows no more data, just a "Loading..." and "Showing NaN to 16 of 16 entries".

EDIT: News : It seems that var origTable line 839 in "_fnCalcRowHeight" has an empty tbody at this step.

Elfayer

I found a solution.
The problem in my case is that in "_fnMeasure" there is :

    if ( this.s.autoHeight )
    {
        this._fnCalcRowHeight();
    }

And this._fnCalcRowHeight() makes the height of a row equal to 0. So I added in my Scroller parameters "rowHeight: 32". This way this._fnCalcRowHeight() is never called because the autoHeight is now false. Also, I still don't understand what the real problem was.

Note: You don't take in consideration if there is a scrollX in your calculation of the "Showing x to y of z entries", so sometimes It shows one more that we don't see which is hidden behind the scrollX.

allan

Thanks for your updates. If you are passing in rowHeight as 32, the height of the rows should only ever be 32 - but are you saying that Scroller is still treating it as 0? if so, that's a bug...

You don't take in consideration if there is a scrollX in your calculation of the "Showing x to y of z entries"

I don't really understand why scrollX would need to be taken into account? The Showing text counts the number of rows that are visible vertically. Could you explain a little more please?

Allan

Elfayer

Thanks for your updates. If you are passing in rowHeight as 32, the height of the rows should only ever be 32 - but are you saying that Scroller is still treating it as 0? if so, that's a bug...

The problem is resolved while setting the Scroller rowHeight at 32. (I saw that it was the default height) And yes it won't move, but I'm using Scroller and I read that the row height should not change while using this extension. So this is not a problem.

You don't take in consideration if there is a scrollX in your calculation of the "Showing x to y of z entries"

I don't really understand why scrollX would need to be taken into account? The Showing text counts the number of rows that are visible vertically. Could you explain a little more please?

Even if there is only one pixel visible of a new row at the bottom of the dataTable, I've seen that the "Showing" text will count this row. So, now if there is a scroll bar in X, this should reduce the viewport in which you count the number of row visible, because the row that was visible by one pixel is now hidden by the scroll bar in X. (I hope that the explanation is clear, it's not easy to explain with words^^) But that's a minor thing I noticed.^^

Also, thank you very much for helping me resolve this problem ! ;)

allan

Ah! I see what you mean. Yes, I hadn't thought of that! I've opened a github issue for it: https://github.com/DataTables/Scroller/issues/20

Allan