Pagination in sap.m.Table
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” }) }) ] }); var oButton1 = 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!!!!
Good one. Thanks for sharing.
I believe it's a huge flaw not to use data binding.
What about if I would for instance use multiselect and my selection spans multiple table pages?
Hi
It is very helpful and great job !
I am trying to achieve the same thing and i have following scenarios :
we are using the java rest services in our project to populate the data, so u can give me some hint it will be very helpful to me.
Thanks,
Pradeep