Updated : SAPUI5 Pagination of Table on Scroll End + Touch pad + Key Strokes
Pagination on scroll end is something most people wondering how do I get it done when SAPUI5 doesn’t even support. I have written hack or work around to get it working (Supported and tested on IE9 +, Chrome, Safari, Mozilla)
var skip = 0; // Start pointing of record
var top = 100; //Size of the record
//Event delegate to bind pagination action
oTable.addEventDelegate({
onAfterRendering : function() {
var intervalPaginate;
var triggerPagination = function() {
oTable.setBusy(true);
var oData = oModel.getData();
skip += 10;
top = oTable.getVisibleRowCount();
triggerBool = true;
sap.apf.updatePath(function(oStep, bStepChanged) {
if (oStep === sap.apf.getActiveStep()) {
oModel.setData(oData);
oTable.rerender();
oTable.setBusy(false);
eventsFired = 0;
}
}.bind(this));
};
//Mouse Scroll Event
$('.sapUiTableCtrlScr, .sapUiTableVSb').on('DOMMouseScroll mousewheel scroll', function(e) {
var self = oTable.$().find(".sapUiScrollBar > div:eq(0)");
if (self[0].scrollHeight - self.scrollTop() == self.height() && !$(".openToggleImage").length && (respData.length > 0)) {
if (eventsFired === 0) {
triggerPagination();
skipAction = 0;
eventsFired++;
}
}
});
//Mouse down & Mouse up Event
$(".sapUiTableCtrlScr, .sapUiTableVSb, .sapUiScrollBar").mousedown(function() {
var self = oTable.$().find(".sapUiScrollBar > div:eq(0)");
intervalPaginate = setInterval(function() {
if (self[0].scrollHeight - self.scrollTop() == self.height() && !$(".openToggleImage").length && (respData.length > 0)) {
if (eventsFired === 0) {
triggerPagination();
skipAction = 0;
eventsFired++;
}
}
}, 10);
}).mouseup(function() {
if (intervalPaginate) {
window.clearInterval(intervalPaginate);
}
});
//KeyPress Events
$('.sapUiTableCtrlScr, .sapUiTableVSb').keydown(function(e) {
if (e.keyCode == 38 || e.keyCode == 40) {
var self = oTable.$().find(".sapUiScrollBar > div:eq(0)");
if (self[0].scrollHeight - self.scrollTop() == self.height() && !$(".openToggleImage").length && (respData.length > 0)) {
triggerPagination();
}
return false;
}
});
}
});
I hope this workaround helps out someone who are currently looking around for solution until SAPUI5 library introduces an API.
is there any way to capture page click event? if there would be a little explanation it would be much better.
Thx