SAPUI5 - Pagination in sap.m.Table using skip and top values of OData Service

[mahesh_z]

Hi ,

As a part of my project actiities, I need to fetch the data from OData service and show it inside sap.m.Table , however the data was huge and there was a need to implement pagination using $skip and $top values of OData service. There is a chance that user may not view all the records hence , fetching all data in one call and putting it inside model was not advisable hence we went ahead with this approach.

Sample implementation is as follows :

We created a table using XML View which is following the normal coding and at the footer , we placed a button which calls the method getNextOrders.

Inside that method , code is written as follows :

getNextOrders:function(oEvent){

  var sServiceUrl = "ServiceURL";

  var oDataModel = new sap.ui.model.odata.ODataModel(sServiceUrl);

  var oModel = new sap.ui.model.json.JSONModel();

  var oUrlParams = "$skip=" + gskipValue + "&$top=" + gTopValue;

  oDataModel.read("/Orders",null,oUrlParams,true,function(oData, response){

  oModel.setData(oData);

  gOrdersModel.setData(oData);

  });

  this.getView().byId('idOrdersTable').setModel(oModel);

  gskipValue = gskipValue + gTopValue;

  },

gSkipValue and gTopValue are global variable which stores the values to be fetched and skipped. For our implementation , we kept both values as 10. So at a time 10 records will be shown on the screen.

Hope this helps in implementing the pagination for others too. Please share any improving points on the same. Will be helpful for me :smile: .

Screenshot with demo data from sample service is attached.

Thanks & Regards,

Mahesh.