Skip to Content
Author's profile photo Former Member

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.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      is there any way to capture page click event? if there would be a little explanation it would be much better.

      Thx