SAP UI5 Paginated buttons are not working

[avisheksharmacoder]

Hi,

I am trying to replicate a simple pagination using Hbox buttons that are dynamically generated depending on the length of the JSON Model.

It looks like this,

But the buttons are not working at all, Can you please help to find the issue.

here are the code files,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

Controller.js

sap.ui.define([

"sap/ui/core/mvc/Controller",

"comPagination1/model/models",

"sap/ui/model/json/JSONModel"

], function(Controller, models, JSONModel) {

"use strict";

return Controller.extend("comPagination1.controller.Root", {

onInit: function(oEvent) {

var tableRow = 5;

var dataObjects = 20;

var pageNos = dataObjects / tableRow;

var oHbox = this.getView().byId("paginationHbox");

for (var i = 1; i <= pageNos; i++) {

var buttonId = "button" + i;

// make button.

var b1 = new sap.m.Button({

text : i.toString(),

id: buttonId,

press : "pressPageNo"

}

);

// set ID and text of the button.

// b1.id = buttonId;

// b1.setText(i);

oHbox.addItem(b1);

}

},

pressPageNo:function(){

var tableRow = 5;

var ID = this.getView().byId("button2").getText();

alert("Page " + ID + " clicked");

//changing data, as per button clicked.

//fetching the RAW Data from models.

var oProductsTemp = models.createProdutsModelRawJSON();

var pressedButton = 2; //lets take we pressed on page 2 button

var start = (tableRow*pressedButton)-tableRow;

var end = (tableRow*pressedButton);

//create final JSON data

var finalJSON = {

"ProductCollection":[]

};

for(var j = start; j < end; j++)

{

finalJSON.ProductCollection.push(oProductsTemp.ProductCollection[j]);

}

//make the new JSONModel,

var finalJSONModel = new JSONModel(finalJSON);

this.byId("paginatedRTable").setModel(finalJSONModel);

}

});

});

Model.js is attached as a file, as it is too big. models.txtrootcontroller.txtrootviewxml.txt

and the View.xml file

<mvc:View controllerName="comPagination1.controller.Root" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<Table id="RTable" headerText="PaginationType" items="{ProductsModel>/ProductCollection}">

<columns>

<Column>

<Text text="ProductID" />

</Column>

<Column>

<Text text="Category" />

</Column>

<Column>

<Text text="MainCategory" />

</Column>

<Column>

<Text text="TaxTarifCode" />

</Column>

<Column>

<Text text="SupplierName" />

</Column>

<Column>

<Text text="WeightMeasure" />

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Text text="{ProductsModel>ProductId}" />

</cells>

<cells>

<Text text="{ProductsModel>Category}" />

</cells>

<cells>

<Text text="{ProductsModel>MainCategory}" />

</cells>

<cells>

<Text text="{ProductsModel>TaxTarifCode}" />

</cells>

<cells>

<Text text="{ProductsModel>SupplierName}" />

</cells>

<cells>

<Text text="{ProductsModel>WeightMeasure}" />

</cells>

</ColumnListItem>

</items>

</Table>

<Panel class="sapUiResponsiveMargin" width="100%">

<Hbox id="paginationHbox"

class="sapUiResponsiveMargin"

width="100%"

alignItems="Center">

</Hbox>

</Panel>

<!--<Panel class="sapUiResponsiveMargin">-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!-- <Button text="1"></Button>-->

<!--</Panel>-->

</content>

</Page>

</pages>

</App>

</mvc:View>

Thank you for the help.