Skip to Content
Author's profile photo Ranjit Rao

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 :
new sap.m.Column({

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;



oButton2.attachPress(function() {

start =start – rowCount;






  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(); = view.byId(“theApp”);

var oModel = new



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) {




             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”)




                    if (i ==sap.ui.getCore().getModel().getProperty(“/countries/length”) – 1) {





             if (start == 0) {




Save and Run the Application.


That’s it!!!!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sriram Vaithiyanathan
      Sriram Vaithiyanathan

      Good one. Thanks for sharing.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      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?

      Author's profile photo Pradeep V
      Pradeep V


      It is very helpful and great job !

      I am trying to achieve the same thing and i have following scenarios :

      1. go to First page - This is clear , i can achieve this
      2. go to next page - I can refer your blog
      3. go to previous page - given in your blog
      4. go to the last page -  This is where i am stuck.

      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.