Infinite Scrolling – Xlinesoft Blog

Infinite scrolling is a useful technique that automatically loads new content when the user scrolls down and reaches the end of the page. This is the kind of feature our customers have been asking for for quite a long time. Turns out it’s not that hard to implement using custom coding.

Enable the “AJAX search, pagination, sort” option in the Pages -> List Page Settings dialog box.
Add the following code to the List page: Javascript OnLoad event of the page on which you need to implement infinite scrolling.

window.pagecount = 1;

// adding load indicator under the grid
$("[data-location='grid']").after("<span class="end_message" style="visibility:hidden;font-weight:bold;margin-bottom:20px;display: block;text-align: center;">End</span>");
$("[data-location='grid']").after("<div class="load_img" style="visibility:hidden;text-align:center;margin-bottom:10px;"><span style="font-weight:bold;margin-bottom:5px;clear:both;display:block;">Loading</span><img src=" style="width:30px;height:30px;"></div>");

// scroll event handler
$(window).on("scroll", function() {
// end of the document and we have more data
if ($(this).scrollTop() + 5 > $(document).height() - $(this).height()) {
window.pagecount++;

// show load indicator
$(".load_img").css("visibility", "visible");

// get the next page content
Runner.runnerAJAX(Runner.pages.getUrl(pageObj.tName, pageObj.pageType) + "?goto=" + window.pagecount,
pageObj.ajaxBaseParams,
function(respObj) {
// hide load indicator
$(".load_img").css("visibility", "hidden");

// in respObj.html contains the whole new page HTML. We need to extract just the data
var grid_tbody = $(respObj.html).find("[data-location='grid']").find("tbody");
if (grid_tbody.find("tr").length > 0) {
// add new records to the grid
$("[data-location='grid']").find("tbody").append(grid_tbody.html());
} else {
// no new data, show 'End' message
$(window).off("scroll");
$(".end_message").css("visibility", "visible");
$(".load_img").remove();
}
});
}
});

That’s it. Appreciate!

Technology