Page 1 of 1
Infinite scrolling
Posted: Mon Nov 02, 2020 8:10 am
by Adam
It seems that this feature is reasonably popular so here's my quick and easy (just 2 steps) solution that seems to work quite nicely...
Step 1... Add this single line to the relevant Client Scripts > Table-Specific > List Page > Startup Script:
Step 2... Add this code to Client Scripts > Global > Pages with header/footer > Global Code:
function infiniteScroll(delay = 1000, previewCheck = true) { // Refresh period ... 1000 = 1 second
$('form[name="ew-pager-form"]').hide();
if ($('#autoscroll').length == 0)
$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table');
$.fn.inViewport = function() {
var win = $(window);
var viewport = { top: win.scrollTop(), left: win.scrollLeft() };
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
manageScroll(delay, previewCheck);
function manageScroll(delay, previewCheck) {
if (!((previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0) || $('.ew-detail-pages').length > 0 || $('.modal.show').length > 0))
{
if ($('#autoscroll').length > 0) {
if ($('#autoscroll').inViewport()) {
page = parseInt($('#autoscroll').attr('data-page'));
pages = parseInt($('input.form-control[name=pageno]').attr('data-pagecount'));
records = parseInt($('input.form-control[name=pageno]').attr('data-pagesize'));
if (page < pages)
{
url = location.href + '?';
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + (page * records);
$('#autoscroll').attr('data-page', String(page + 1));
$('.ew-preview-row-btn.icon-collapse').trigger('click');
$('table.ew-table > tbody').load(url + ' table.ew-table > tbody tr', function(response, status, xhr) {
if (status == 'success') {
$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
$('.ew-preview-row-btn').click(ew.showDetails);
$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
$('div.popover').hide();
ew.initTooltips();
}
});
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + records;
$.get(url);
}
}
}
}
setTimeout(manageScroll, delay, delay, previewCheck);
}
}
...and then regenerate at least the relevant list page and the userfn.js files.
I suggest that you set the page size to 5 - that seems to be a good number of records to add each time, and the default delay of 1000ms also seems to work quite well, but feel free to experiment.
Be aware that the top and/or bottom paging controls will be removed from view to avoid interfering with the infinite scroll functionality.
As with my list refreshing code, the default is to abort if a preview panel or model dialog is open, but those checks can be overridden as required.
Enjoy!
Re: Infinite scrolling
Posted: Fri Nov 06, 2020 8:57 pm
by sticcino
cool,
- cursor progress icon stays on screen and the page progress icon are always displayed
- as soon as page is loaded the 5 recs display, then 10, then 15, then 20 then 25..... without even "scrolling down", this should sit at the 5 until the cursor moves to the bottom of the page, testing on a contacts form which has 2000 records
can you add a floating "arrow" to go back out 5-10 rows/page up ?
Re: Infinite scrolling
Posted: Sat Nov 07, 2020 11:41 am
by mobhar
If we have 11 or 12 records in the current table, the first 5 records and the second 5 records are successfully displayed in the List page after scrolling down to the bottom of page. Unfortunately, the last 1 or 2 records will not displayed.
Re: Infinite scrolling
Posted: Sun Nov 08, 2020 4:15 am
by Adam
I'm not quite sure how that could occur... if you have 11 or 12 records then there would be 3 pages, so "if (page < pages)" would still be true.
You can try moving "$('#autoscroll').attr('data-page', String(page + 1));" into the "if (status == 'success') {" block and see if that helps.
Re: Infinite scrolling
Posted: Sun Nov 08, 2020 7:43 am
by mobhar
Adam wrote:
so "if (page < pages)" would still be true.
I don't think so. That code should be:
Adam wrote:
You can try moving "$('#autoscroll').attr('data-page', String(page + 1));" into the "if (status == 'success') {" block and see if that helps.
Yep, that did the trick, too.
So here is the latest updated version (I added comment using BEFORE word to see the previous condition):
function infiniteScroll(delay = 1000, previewCheck = true) { // Refresh period ... 1000 = 1 second
$('form[name="ew-pager-form"]').hide();
if ($('#autoscroll').length == 0)
$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table');
$.fn.inViewport = function() {
var win = $(window);
var viewport = { top: win.scrollTop(), left: win.scrollLeft() };
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
manageScroll(delay, previewCheck);
function manageScroll(delay, previewCheck) {
if (!((previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0) || $('.ew-detail-pages').length > 0 || $('.modal.show').length > 0))
{
if ($('#autoscroll').length > 0) {
if ($('#autoscroll').inViewport()) {
page = parseInt($('#autoscroll').attr('data-page'));
pages = parseInt($('input.form-control[name=pageno]').attr('data-pagecount'));
records = parseInt($('input.form-control[name=pageno]').attr('data-pagesize'));
if (page <= pages) // BEFORE: page < pages
{
url = location.href + '?';
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + (page * records);
$('.ew-preview-row-btn.icon-collapse').trigger('click');
$('table.ew-table > tbody').load(url + ' table.ew-table > tbody tr', function(response, status, xhr) {
if (status == 'success') {
$('#autoscroll').attr('data-page', String(page + 1)); // BEFORE: it is located outside/above this block
$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
$('.ew-preview-row-btn').click(ew.showDetails);
$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
$('div.popover').hide();
ew.initTooltips();
}
});
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + records;
$.get(url);
}
}
}
}
setTimeout(manageScroll, delay, delay, previewCheck);
}
}
Re: Infinite scrolling
Posted: Thu Jun 03, 2021 10:10 pm
by Bishu
Wow! it is a very nice option. I love it
here when I scroll down a long record and try to move to the Top it takes a long time.
I hope it will be nice to have a small floating button "TOP"
so that we can move directly to "TOP" easily.
Re: Infinite scrolling on Custom Templates
Posted: Sun Jun 06, 2021 1:37 pm
by Bishu
It is working perfect on Normal List Page.
But When I try to use in custom templates List Page all the data are hide and only the table border are showing.
I have created a simple table format and "table.ew-table > tbody tr" is in the table.
My custom table is as follows.
<table class="table ew-table">
<thead>
<tr class="ew-table-header">
<th>{{{mobile}}}</th>
</tr>
</thead>
<tbody>
<tr {{{row_attrs}}}>
<td>{{{mobile}}}</td>
</tr>
</tbody>
</table>
Can anyone please guide me to run this "Infinite Scrolling" while using List Custom Templates?
I am unable to debug the issue.
Re: Infinite scrolling
Posted: Mon Jun 07, 2021 6:12 pm
by mobhar
I don't think it will work properly in Custom Templates, since its behavior is difference with the normal List page.
Re: Infinite scrolling
Posted: Fri Nov 19, 2021 12:08 am
by bui
Is there any update for Version 2022
Re: Infinite scrolling
Posted: Fri Nov 19, 2021 7:05 am
by Adam
Not yet, but you're welcome to give it a go - the concept was fairly basic.
Re: Infinite scrolling
Posted: Fri Nov 19, 2021 9:39 am
by bui
Adam wrote:
Not yet, but you're welcome to give it a go - the concept was fairly basic.
Thanks. This Infinite scrolling is very useful.
It will be better if it works for the Custom Template also.
Re: Infinite scrolling
Posted: Sat Nov 20, 2021 6:37 pm
by Adam
As long as there's a defined element that can be replaced by the Aax call then the concept will work for any page
Re: Infinite scrolling
Posted: Mon Nov 22, 2021 11:30 am
by mobhar
bui wrote:
Is there any update for Version 2022
I've just tested my customization code above in v2022, and it works properly in the normal List page (without using Custom Templates).
Re: Infinite scrolling
Posted: Sat Nov 27, 2021 7:52 pm
by bui
Is there any alternate way to do with the Custom Templates?
Re: Infinite scrolling
Posted: Wed Dec 22, 2021 9:54 am
by mdfaisalpapa
mobhar wrote:
I've just tested my customization code above in v2022, and it works properly in the normal List page (without using Custom Templates).
Tried in v2022.7 the page loads initially with records but the records get vanished.
Re: infinte scrolling not working
Posted: Thu Dec 23, 2021 7:59 am
by mobhar
Press F12 and see whether any Javascript error message in Console section.
Re: infinte scrolling not working
Posted: Thu Dec 23, 2021 8:02 am
by mdfaisalpapa
No error message in F12.
my page is a master/detail page .
records from master and detail are visible for a second and gets hidden.
only the table header and the add button is visible
Re: infinte scrolling not working
Posted: Thu Dec 23, 2021 8:05 am
by mobhar
It seems it only works in single List page (not in Master/Detail List page).
Re: Infinite scrolling
Posted: Sun Dec 26, 2021 3:23 pm
by mdfaisalpapa
changing the line
$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table');
to
$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table:last');
makes it work in both the normal page and master/detail page