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.

8 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) 
  3. meirav weinstein

    Hi,

    Thanks for this post!

    I am trying to implement it, but I am always getting the full list from oData.

    I have also tested the row in the gateaway client and still I get all the rows.

    Here is my url:

    “ZQV_ORDERSSet?$filter=reqContactId eq ‘0000000012’&$format=json&$top=2&$skip=2”

    Do you have any idea what might be the problem?

     

    Thanks,

    Meirav

     

     

    (0) 
    1. Sharmila Gurubelli Post author

      Hi Meirav,

      Did you tested ODATA service?

      Top and Skip functionality should be written in the ODATA service. Please check with the service and let me know.

       

      Thank you,

      Sharmila.

      (0) 
  4. Pradeep V

    Hi,

    great Post,

    Can you please tell me , How do you remove the pagination from table, when it is doing by default, when ever i load the data from the odata service, it is adding skip and top in the url, how can i remove the top and skip in the odata service call?

     

    Regards,

    Pradeep

    (0) 

Leave a Reply