on 05-16-2017 11:18 AM
<!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?
Hi Priyanshi,
Please find the below example, this will help you achieve the pagination you are trying to get.
GB
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
94 | |
11 | |
11 | |
10 | |
9 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.