Skip to Content

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");   			      
			  });	
   		},
To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Mantri Shekar

    Hi Sharmila,

    I am trying implement the pagination functionality using Northwind Services.But it is not displaying the data.

    Iam using Javascript Views.

    Below is my Coding in onitnit Method.

    onInit: function() {
    var serviceUrl = “http://cors-anywhere.herokuapp.com/services.odata.org/V3/Northwind/Northwind.svc/”;
    var oModel = new sap.ui.model.odata.ODataModel(serviceUrl);

    oModel.read(“/Products_by_Categories?$top=5”,null,null,true,function(oData){
    var oDataJSONModel = new sap.ui.model.json.JSONModel();
    oDataJSONModel.setData(oData);
    sap.ui.getCore().byId(“oDataTable”).setModel(oDataJSONModel,”getData”);
    });

    },

     

    In View

     

    oDataTable.bindItems(“/Products_by_Categories”,template);

    Please help em to achieve the output.

     

    Regards,
    Shekar.

    (0) 
  2. Srikar Nagadevara

    Hey, Sorry for the late reply can u use the below syntax

     var oTable = that.byId("bankTable");
    			oTable.setModel(new sap.ui.model.json.JSONModel({
    				"ReadSet": tabledata
    			}));
    			var sHash = "/" + "ReadSet";
    			oTable.bindAggregation("items", {
    				path: sHash
    			});

     

    (0) 

Leave a Reply