BUG: DT2 - Only one paging button is shown

stanleyxu2005

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hello developers,

I'm excited to migrate from v1.13.10 to v2.0.0. I have an issue with paging buttons (without attaching styling)

I have 3500 records, each page displays 10 records. I'm using 'simple_numbers'.
In v1, I can see paging buttons "<" "1", "2", "3", "4", "5", ..., "350" ">".
In v2, I can see paging buttons "<" "1" ">" (when I click on Next, "1" will be replaced with "2")

So it is related to rendering issue.

I investigated the source code.

    function _pagingDraw(settings, host, opts) {
         ....
        // Responsive - check if the buttons are over two lines based on the
        // height of the buttons and the container.
        if (
            buttonEls.length && // any buttons
            opts.numbers > 1 && // prevent infinite
            $(host).outerHeight() >= ($(buttonEls[0]).outerHeight() * 2) - 10
        ) {
            _pagingDraw(settings, host, $.extend({}, opts, { numbers: opts.numbers - 2 }));
        }
    }

In my case, the value of $(host).outerHeight() is 0, the value of $(buttonEls[0]).outerHeight() is also 0.
If I put breakpoints into _pagingDraw. I can see nested call of _pagingDraw.
The value of numbers is decreased from 7 to 5 to 3 and then down to 1.

My current workaround is to specify a height in css file for the paging-container.
I'm not sure why the calculated height is 0, although Chrome DevTool tells its 52px.

I'm wondering if comparing the outer heights of host & buttons only when heights are positive values?
Hope my investigation makes sense.

stanleyxu2005

Apology, my investigation is not entirely correct.
I noticed my pagination container has a vertical padding 12px.
so container height is 52px, button is 28px.
so the condition is true in my case: 52 > 28*2-10
Correct workaround is I have to remove the padding of my own style rule.

Do you think if you should use .height() instead of .outerHeight() to check?

allan

Could you give me a link to a page showing the issue so I can debug it and make any changes needed to DataTables core please?

Thanks,
Allan

stanleyxu2005

Sure. You can tweak the styles.css to fix/reproduce the issue

https://codesandbox.io/p/sandbox/dt2-pagination-issue-zt8dnr

stanleyxu2005

An additional question. in v1.x, all numbered buttons are wrapped in a <span>. but in v2, all numbered buttons and the nav buttons (next/prev) are grouped together. How to write a smart rule to style numbered buttons only?

I'd like to add some special styles to numbered buttons only, but I dont have a good to way to differenicate them with nav buttons.

Deepikam123

Am also facing same issue, whats the fix?

allan

I lost sight of this one - apologies. @stanleyxu2005 Thank you for the test case. I agree, using $().height() for the container measurement would be the correct thing to do. I've committed that change and it will be in 2.0.2 which I'll release soon (later today or tomorrow).

Allan

mvpasarel

I have the same issue with datatables.net-bs@2.0.1 Will this be fixed there too?

allan

Yes, 2.0.2 should be tagged and released today.

Allan

stanleyxu2005

Thank you so much for fixing the bug @allan

allan

DataTables 2.0.2 released