Responsive together with pageResize

tnaescher

Hey, i have a general question regarding the use of pageResize with responsive (hiding columns and showing the green + instead).
If I open the details of one row, the pageResize script (https://github.com/DataTables/Plugins/blob/master/features/pageResize/dataTables.pageResize.js) does not adapt the row count - and then, a vertical scroll bar appears again. It disappears as soon as i close the row details again.
My goal is that opening the responsive-detail-view reduces the numbers of rows on the screen as needed to avoid displaying a scroll bar.
Here is what i tried - didnt work

table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
            var api = new DataTable.Api(settings);
            if ($(api.table().node()).hasClass('pageResize') ||
                settings.oInit.pageResize ||
                DataTable.defaults.pageResize) {
                new PageResize(api, settings.oInit.pageResizeManualDelta);
            }
    });

Can you point me in the right direction? Which resize function can i call in the event?
Here is a demo: https://live.datatables.net/qagufiti/4/edit
Thanks

allan

Hi,

Thanks for this. I hadn't thought of this before to be honest. PageResize isn't taking into account the child row heights. I can look into that, but in the meantime, another option might be to use a modal display rather than the child row for Responsive?

Allan

tnaescher

Hi,

Sure, the modal is an option - i'd much prefer the default look though.
Thanks for looking into it

Best, Timothy

allan

Hi Timothy,

I've been looking at the code and trying to figure out how to make this work, but I think there might be a few complications along the way and might end up making it not practical.

At the moment PageResize assumes that all rows are of the same height, allowing it to perform calculations based on a single measurement rather than reading multiple heights, which is a slow process. I can add an method to do more accurate height reading that could optionally be enabled. However, there are a couple of UX issues I've thought of:

1. Click on the bottom row to show its details, it could overflow the container, causing PageResize to drop that row to the next page. Thus the row would appear to disappear when the user clicked it.
2. DataTables assumes that page sizes are going to be consistent over multiple pages - all of its calculations are simply based on numberOfRecords and pageSize. However, with a change for this, on the first page you might only fit 4 records on the first page, 5 on the second, 10 on the third, 1 on the fourth, etc. All the information and paging calculations would be out of the window with that approach.

I fear that these problems are going to mean that the modal display (or some other form) are going to be the best option.

Perhaps as a final option, when Responsive collapses a single column it should collapse all of them and display as a list rather than a table. That might present more options for using PageResize - but all rows would still have to be exactly the same height.

Allan

tnaescher

Hi Allan,

your first point probably rules out any chance of a "quick fix". I didn't think of that, and just switching to the next page where the row is opened is probably more confusing than helpful.
The Modal option seems to be the best bet here.

Best, Timothy