cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to update data within the same rows in SapUI5 table

Former Member

on ‎05-16-2017 11:18 AM

0 Kudos 
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Pagination</title>
      <script id="sap-ui-bootstrap"
         src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"></script>
         <style>
             .margin{
                     margin-top: 1rem;
             }
             .cursor{
                     cursor: pointer;
             }
             .textAlign{
                 text-align:center;
             }
         </style>
      <script>
        var oModel = new sap.ui.model.json.JSONModel( );
         sap.ui.getCore().setModel(oModel);
         
        	 var z;
             var oTable = new sap.ui.table.Table({
    	  title: "country",
	id:"oTable",
	   width : "auto",
    	  visibleRowCount: 5,
	textAlign:"center",
	position: "middle"
     
    });
    oTable.addColumn(new sap.ui.table.Column({
      multiLabels: [new sap.ui.commons.Label({
        text: "name",
	hAlign : sap.ui.core.HorizontalAlign.Center
      })],
      template: new sap.ui.commons.TextView().bindProperty("text", "name"),
      sortProperty: "name",
      filterProperty: "name",
      width: "150px",
	hAlign : sap.ui.core.HorizontalAlign.Center
    }));
    oTable.addColumn(new sap.ui.table.Column({
      multiLabels: [new sap.ui.commons.Label({
        text: "short",
		hAlign : sap.ui.core.HorizontalAlign.Center
      })],
      template: new sap.ui.commons.TextView().bindProperty("text", "shorts"),
      sortProperty: "shorts",
      filterProperty: "shorts",
      width: "150px",
      	hAlign : sap.ui.core.HorizontalAlign.Center
    }));
                 var oButton1 = new sap.m.Button({
              text : "Next",
              id : "Next"
              });
              
              var oButton2 = new sap.m.Button({
              text : "Previous",
              id : "Previous"
              });
              
         


$.ajax({


   		type: "POST",
		url:"/XMII/Illuminator?QueryTemplate=xyz/Query/CountrySel&IsTesting=T&Content-Type=text/JSON",  
		success: function (data) {


	           var rows = data.Rowsets.Rowset[0].Row;
		  z=rows.length;
		
		var aData  =[ ];
 
              horizontalLayout.addContent(oButton1);
              horizontalLayout.placeAt("uiArea1");
              oTable.placeAt("uiArea");
    
            
                populateData(0,2);
          
              function populateData(start, rowCount) {
       		
                        sap.ui.getCore().byId("Previous").setEnabled(true);
                        sap.ui.getCore().byId("Next").setEnabled(true);
						sap.ui.getCore().byId("oTable").unbindRows();
	
               console.log(sap.ui.getCore().byId("oTable").unbindRows());
 


                        for (i = start; i <start + rowCount; i++) {
aData.push({name:data.Rowsets.Rowset[0].Row[i].name, shorts: data.Rowsets.Rowset[0].Row[i].shorts});
oTable.setModel(oModel);
		  oTable.bindRows("/");


                               if (i ==z-1) {
			
   
                   sap.ui.getCore().byId("Next").setEnabled(false);
              
                                      break;
              
                               }
	         
                        }
 
                        if (start == 0) {
                            
                               sap.ui.getCore().byId("Previous").setEnabled(false);
              
                        }
           
}


	 oModel.setData(aData);		
                           
  oButton1.attachPress(function() {


              start =start + rowCount;
              populateData(start,rowCount);
              });
              oButton2.attachPress(function() {
              start =start - rowCount;
              populateData(start,rowCount);
            
              });
		},
		error: function (err) {
		alert(err.responseText);
		 	alert("Local error callback.");
 		 }     
    	
              
 });//ajax close  


 	 var horizontalLayout=new sap.ui.layout.HorizontalLayout();
              horizontalLayout.addContent(oButton2);
              horizontalLayout.addStyleClass("textAlign");
              
              var start = 0;
              var i = 0;
              var rowCount = 2;
              var previousSelection=1; //to maintain the label selection
       
                       
           
      </script>
   </head>
   <body class="sapUiBody">
  
      <div id="uiArea"></div>
      <div id="uiArea1" class="textAlign"></div>
      <div id="uiArea2"></div>
   </body>
</html>

I am trying to write a code for paginator in SAPUI5 in which i want only 2 rows to appear everytime data is displayed.On clicking Next button new data should be added in the table and on clicking previous button previous data has to be added but the condition is that data must be updated everytime only in the two rows i.e. no additional rows must be added on clicking the "Next" and "Previous" buttons,only new data must appear in the same 2 rows.

In my case i am getting correct data on clicking "Next" and "Previous" buttons but in the new rows.

I tried sap.ui.getCore().byId("oTable").unbindRows(); to remove the old rows but its not working,Is there any other way to update the data within the same rows?

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
‎05-18-2017 12:04 PM
0 Kudos

Hi Priyanshi,

Please find the below example, this will help you achieve the pagination you are trying to get.

Sap ui5 table pagination

regards

GB

Show replies
Show replies
Ask a Question