$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

How to update data within the same rows in SapUI5 table

<!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?

country.png (12.5 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    May 18, 2017 at 11:04 AM

    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

    Add comment
    10|10000 characters needed characters exceeded