I was having a requirement something as follows:
I was using sap.m.Table. I had a json Model. But what actually was needed was, the model had 10 records, and were required to be shown in splits of 2.
There was direct solution, had i used sap.ui.Table by setting the navigationMode to Paginator. Unfortunately, sap.m.Table doesn’t have any of that sort (if I am not wrong).
So, I had to do a bit of back of the hand bowling to achieve this. I had placed two buttons named “Previous” and “Next”, then some magical code.
So lets get into it. In this example I will be using a model with 7 records to be shown in splits of 2.
Firstly the Design<View1.view.js>
In the CreateContent of the View paste the following code:
| CreateContent of View.js |
|---|
var oPage = new sap.m.Page({title : "Company Details" }); var oTable = new sap.m.Table({
id : "Countries", mode : sap.m.ListMode.None, headerText: "Details of the Countries",
columns :
width: "1em", header: new sap.m.Label({ text: "Name" }) }), new sap.m.Column({ width: "1em", header: new sap.m.Label({ text: "short" }) }) ] }); varoButton1 = new sap.m.Button({ text : "Next", id : "Next" });
var oButton2 = new sap.m.Button({ text : "Previous", id : "Previous" });
var start = 0; var i = 0; var rowCount = 2; oButton1.attachPress(function() { start =start + rowCount; oController.populateData(start,rowCount); }); oButton2.attachPress(function() { start =start - rowCount; oController.populateData(start,rowCount); }); oPage.addContent(oTable); oPage.addContent(oButton2); oPage.addContent(oButton1); return oPage; |
Secondly, the controller.js
In the onInt() method paste the following Code:
| onInit() Method of Controller.js |
|---|
var data = { "countries" : [ {
"name" : "India", "short" : "In"
},
"name" : "England", "short" : "En"
},
"name" : "Australia", "short" : "Oz"
},
"name" : "New Zealand", "short" : "Nz"
},
"name" : "France", "short" : "Fr"
},
"name" : "SouthAfrica", "short" : "SA"
},
"name" : "Germany", "short" : "Gr"
}
};
var view = this.getView(); this.app = view.byId("theApp"); var oModel = new sap.ui.getCore().setModel(oModel); this.populateData(0,2); |
Now , the last part: Coding the populateData method.
Paste the following code in the controller.js file after as a method.
| populateData Method of Controller.js |
|---|
populateData : function(start, rowCount) {
sap.ui.getCore().byId("Previous").setEnabled(true); sap.ui.getCore().byId("Next").setEnabled(true); sap.ui.getCore().byId("Countries").destroyItems();
for (i = start; i <start + rowCount; i++) { oTableRow= new sap.m.ColumnListItem({
type: "Active", visible: true, selected: true, cells: [
new sap.m.Label({ text: sap.ui.getCore().getModel().getProperty("/countries/" + i + "/name")
}),
new sap.m.Label({ text: sap.ui.getCore().getModel().getProperty("/countries/" + i + "/short")
}) }); sap.ui.getCore().byId("Countries").addItem(oTableRow);
if (i ==sap.ui.getCore().getModel().getProperty("/countries/length") - 1) {
sap.ui.getCore().byId("Next").setEnabled(false);
break;
} }
if (start == 0) {
sap.ui.getCore().byId("Previous").setEnabled(false);
}
} |
Save and Run the Application.
That's it!!!!