Infinite scroll – Xlinesoft Blog

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();
}
});
}
});