Responsive together with pageResize
Responsive together with pageResize
tnaescher
Posts: 22Questions: 6Answers: 0
in Responsive
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 
Answers
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
Hi,
Sure, the modal is an option - i'd much prefer the default look though.
Thanks for looking into it
Best, Timothy
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:
numberOfRecordsandpageSize. 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
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