SAPUI5 – Pagination in sap.m Table on button click using ODATA Service

Hi, in this blog I’m going to explain about how to display the table entries with ODATA service having skip and top functionality in detail

For an example, in a service, we have ‘n’ table entries, where I have a requirement to

1. Display the data on button click (< >) instead of scrolling the page.

2. Disable/Enable the button, when the entries extends limit (ie., if n = 20 then after reaching the table entry 20 the button should be disabled and vice versa for button enable)

This can be achieved by using the ODATA service with top and skip functionality

Here I have taken 20 table entries in the ODATA service, which I want to display 5 entries on each click on a button.

1) Initially i’m gonna display 5 records/entries using – $top=5

2) On button click, next 5 records/entries will be displayed using – $top=5 & $skip=5

(this query skips 5 records out of 20 = 15 and displays first 5 from the 15 records)

Let’s see now steps in detail 🙂

1. In index.html page, I have written the following code in order to retrieve the table entries, so that I can validate for the table button disable/Enable functionality.

2. Initially, 5 entries will be displayed in the table and Previous button is disabled (<) using onInit function.

3. on button click next (>) the following code will be triggered

4. on button click previous (<) the following code will be triggered

Source Code:

onInit: function() {
		var that = this;
		var Btn = this.getView().byId("btn_previous");
		Btn.setEnabled(false);
		var oModel1 = new sap.ui.model.odata.ODataModel(url); 
		oModel1.read("/Material_DataSet?$top=5", null,null,true, function(oData){ 
		var oODataJSONModel1 =  new sap.ui.model.json.JSONModel(); 
		oODataJSONModel1.setData(oData); 
		that.getView().setModel(oODataJSONModel1,"getData");		   
		  });
	},

	
	next : function() { 
			if(clicks < 0)
			{
			 clicks = 0;
			 clicks += 1;	     
			}
			else{		   
		     clicks += 1;
			};		 
			num = clicks * 5;
			count1;		
				if(num === count1)
				{
				 var Btn = this.getView().byId("btn_next");
				 Btn.setEnabled(false);
				}				
				if(num >= 5)
				{	
			   		    var Btn = this.getView().byId("btn_previous");
			   			 Btn.setEnabled(true);			   			
				}				
				this.data();			
		},
		
		previous : function() { 
			clicks -= 1;
			if(clicks <= 0)
			{		
			  num = 0;
			}
			else{	       		
			 num = clicks * 5;   
			};   
   			if(num < count1)
			{		  
			 var Btn = this.getView().byId("btn_next");
			 Btn.setEnabled(true);
			}
   			if(num === 0)
   			{
   		     var Btn = this.getView().byId("btn_previous");
   			 Btn.setEnabled(false);
   			}   			
   			this.data();   		
   		},
		
	
   		data: function(){
   			  var that = this;
   		      var oModel3 = new sap.ui.model.odata.ODataModel(url); 
			  oModel3.read("/Material_DataSet?$top=5&$skip="+num+"", null,null,true, function(oData){ 
			  var oODataJSONModel3 =  new sap.ui.model.json.JSONModel();
			  oODataJSONModel3.setData(oData);
			  that.getView().setModel(oODataJSONModel3,"getData");   			      
			  });	
   		},