In this blog post I will mention about how we add paginator to grid tables. Firstly, the paginator control was in older versions. After 1.38 version of UI5, we couldn’t add paginator in grid tables.
When I started to coding pagination structure , It seems very easy . But after some parts of filtering, sorting , changing page count functionality , it became more and more complex. For Example ; if you will use filtering you should regenerate paginator vs..
After this workings, I plan to create new custom control and use it in view in easy way.
Also Read: SAP Fiori Application Developer Certification Preparation Guide
You can view it in Plunker.
For Desktop
For Mobil Devices
First of all, I perform the rendering of the Paginator after each reporting process is finished. The point to be careful here is that , we need to do the paginator again in all sorting and filtering operations.
_setTableSettings: function (params) {
var oTable = this.getView().byId("productTable");
var oTableModel = this.getView().getModel("tableItems");
var aTableData = this.getView().getModel("modelProducts").getData().ProductCollection;
oTableModel.setData(aTableData);
this._reportData = aTableData;
this.addPaginator("productTable", aTableData);
oTable.attachSort(null, function (params) {
this._oTableSort = {
sortOrder: params.getParameters().sortOrder,
sortProperty: params.getParameters().column.getSortProperty()
};
var aTablex = this._reportData.slice(0);
for (var k = 0; k < aTablex.length; k++) {
var element = aTablex[k];
console.log(element[this._oTableSort.sortProperty])
}
var aTable = this._sortAndFilterTable(aTablex);
for (k = 0; k < aTable.length; k++) {
element = aTable[k];
}
this.addPaginator("productTable", aTable);
}.bind(this));
oTable.attachFilter(null, function (params) {
var filterValue = "";
var filterOperator = "";
var filterProp = params.getParameters().column.mProperties.filterProperty;
if (typeof this._reportData[0][filterProp] === "object" || typeof this._reportData[0][filterProp] === "number") {
filterValue = params.getParameters().value;
filterOperator = "EQ";
}
else {
filterValue = params.getParameters().value;
filterOperator = "Contains";
}
for (var j = 0; j < this._aTableFilters.length; j++) {
var element = this._aTableFilters[j];
if (element.filterProp === filterProp) {
this._aTableFilters.splice(j, 1)
j--;
}
}
this._aTableFilters.push(
{
filterProp: filterProp,
filterValue: filterValue,
filterOperator: filterOperator
}
);
var aTablex = this._reportData.slice(0);
var aTable = this._sortAndFilterTable(aTablex);
this.addPaginator("productTable", aTable);
}.bind(this));
},I created the template for adding the paginator structure with the below code block . I am creating a separate template for Mobile.
var oTable = this.byId(tableId);
var oContentHolder = oTable.getParent();
this._destroyControl("selectPage");
this._destroyControl("vbox1");
var oVBox1 = new sap.m.VBox("vbox1", {
});
this._destroyControl("hbox1");
var oHBox1 = new sap.m.HBox("hbox1", {
justifyContent: "SpaceBetween",
width: "90%"
});
this._destroyControl("hboxPagination");
var oHBoxPagination = new sap.m.HBox("hboxPagination", {
justifyContent: "Center",
width: "75%"
});
this._destroyControl("hbox2");
var oHBox2 = new sap.m.HBox("hbox2", {
justifyContent: "SpaceBetween",
width: "15%"
});
this._destroyControl("hbox3");
var oHBox3 = new sap.m.HBox("hbox3", {
alignItems: "Center",
width: "45%"
});
this._destroyControl("label1");
var oLabel1 = new sap.m.HBox("label1", {
text: "Kalem Sayısı"
});
this._destroyControl("hbox4");
var oHBox4 = new sap.m.HBox("hbox4", {
width: "45%"
});
if (this._selectedCount === "") {
this._selectedCount = "10";
}
this._destroyControl("comboboxCount");
var oComboBoxCount = new sap.m.ComboBox("comboboxCount", {
selectedKey: this._selectedCount,
width: "10em",
change: this.changeComboBoxCount.bind(this)
});
oComboBoxCount.addItem(new sap.ui.core.Item({ key: "10", text: "10" }));
oComboBoxCount.addItem(new sap.ui.core.Item({ key: "25", text: "25" }));
oComboBoxCount.addItem(new sap.ui.core.Item({ key: "50", text: "50" }));
oComboBoxCount.addItem(new sap.ui.core.Item({ key: "100", text: "100" }));
oComboBoxCount.addItem(new sap.ui.core.Item({ key: "150", text: "150" }));
if (this._devicePhone) {
oHBoxPagination.setWidth("");
oHBox1.setJustifyContent("Center");
oHBox1.addItem(oHBoxPagination);
oHBox1.addItem(oLabel1);
oComboBoxCount.setSelectedKey("5");
// oHBox1.addItem(oComboBoxCount);
oVBox1.addItem(oHBox1);
oContentHolder.addContent(oVBox1);
}
else {
oHBox3.addItem(oLabel1);
oHBox4.addItem(oComboBoxCount);
oHBox2.addItem(oHBox3);
oHBox2.addItem(oHBox4);
oHBox1.addItem(oHBoxPagination);
oHBox1.addItem(oHBox2);
oVBox1.addItem(oHBox1);
oContentHolder.addContent(oVBox1);
}
this.generatePaginator(tableData);The code block below is where the paginator algorithm works. Depending to the page count and item count , I fill properties of my paginator object and init it . For mobile, I prefer select control.
generatePaginator: function (tableData) {
var oTablex = this.getView().byId("productTable");
if (tableData === undefined)
return;
var countTable = tableData.length;
var oComboBoxCount = sap.ui.getCore().byId("comboboxCount");
if (oComboBoxCount === undefined) { count = undefined; }
else {
if (oComboBoxCount.getSelectedKey() !== undefined && oComboBoxCount.getSelectedKey() !== null) {
var count = parseInt(oComboBoxCount.getSelectedKey());
}
else {
count = undefined;
}
}
if (count !== undefined) {
var countPerPage = count;
}
else {
if (this._devicePhone) {
countPerPage = 5;
}
else {
countPerPage = 10;
}
}
oTablex.setVisibleRowCount(countPerPage);
var size = parseInt(countTable / countPerPage);
if (countTable % countPerPage !== 0) {
size++;
}
this.oPagination.container = sap.ui.getCore().byId("hboxPagination");
this.oPagination.container.destroyItems();
this.oPagination.init({
size: size,
page: 1,
step: 5,
table: oTablex,
countTable: countTable,
countPerPage: countPerPage,
tableData: tableData,
devicePhone: this._devicePhone,
deviceTablet: this._deviceTablet
});
},You can find Pagination object below.
oPagination: {
container: {},
init: function (properties) {
this.Extend(properties);
this.Start();
},
Extend: function (properties) {
properties = properties || {};
this.size = properties.size || 1;
this.page = properties.page || 1;
this.step = properties.step || 5;
this.table = properties.table || {};
this.countTable = properties.countTable || 0;
this.countPerPage = properties.countPerPage || 10;
this.tableData = properties.tableData || 10;
this.devicePhone = properties.devicePhone;
this.deviceTablet = properties.deviceTablet;
},
Start: function () {
this.table.clearSelection();
this.container.destroyItems();
if (this.devicePhone || this.deviceTablet) {
var oSelect = new sap.m.Select("selectPage", {
change: this.SelectChange.bind(this),
});
this.container.addItem(oSelect);
}
if (this.size < this.step * 2 + 6) {
this.AddNumber(1, this.size + 1);
}
else if (this.page < this.step * 2 + 1) {
this.AddNumber(1, this.step * 2 + 4);
this.AddLastNumber();
}
else if (this.page > this.size - this.step * 2) {
this.AddFirstNumber();
this.AddNumber(this.size - this.step * 2 - 2, this.size + 1);
}
else {
this.AddFirstNumber();
this.AddNumber(this.page - this.step, this.page + this.step + 1);
this.AddLastNumber();
}
this.setFixedButtons();
if (this.devicePhone || this.deviceTablet) {
var aSelectItems = oSelect.getItems();
for (var k = 0; k < aSelectItems.length; k++) {
var item = aSelectItems[k];
var r = item.getText();
if (r === this.page.toString()) {
oSelect.setSelectedItem(item);
}
}
}
else {
var aButtons = this.container.getItems();
for (var i = 0; i < aButtons.length; i++) {
var oButton = aButtons[i];
if (oButton.getText() === this.page.toString()) {
oButton.setType("Emphasized");
}
}
}
this.filterTable();
},
AddNumber: function (s, f) {
for (var i = s; i < f; i++) {
if (this.devicePhone || this.deviceTablet) {
sap.ui.getCore().byId("selectPage").addItem(
new sap.ui.core.Item({
key: i,
text: i
})
);
}
else {
var oButton = new sap.m.Button({
text: i,
press: this.ClickNumber.bind(this)
});
this.container.addItem(oButton);
}
}
},
AddFirstNumber: function () {
if (this.devicePhone || this.deviceTablet) {
sap.ui.getCore().byId("selectPage").insertItem(
new sap.ui.core.Item({
key: 1,
text: 1
}, 2)
);
}
else {
var oButton = new sap.m.Button({
text: 1,
press: this.ClickNumber.bind(this)
});
this.container.insertItem(oButton, 2);
oButton = new sap.m.Button({
text: "...",
// press: this.Click.bind(this)
});
this.container.insertItem(oButton, 3);
}
},
AddLastNumber: function () {
if (this.devicePhone || this.deviceTablet) {
sap.ui.getCore().byId("selectPage").insertItem(
new sap.ui.core.Item({
key: this.size,
text: this.size
}, this.size - 3)
);
}
else {
var oButton = new sap.m.Button({
text: "...",
// press: this.ClickNumber.bind(this)
});
this.container.insertItem(oButton, this.size - 4);
oButton = new sap.m.Button({
text: this.size,
press: this.ClickNumber.bind(this)
});
this.container.insertItem(oButton, this.size - 3);
}
},
SelectChange: function (oEvent) {
this.page = parseInt(oEvent.getParameters().selectedItem.getText());
this.Start();
},
ClickNumber: function (oEvent) {
this.page = parseInt(oEvent.getSource().getText());
this.Start();
},
ClickPrev: function () {
this.page--;
if (this.page < 1) {
this.page = 1;
}
this.Start();
},
ClickNext: function () {
this.page++;
if (this.page > this.size) {
this.page = this.size;
}
this.Start();
},
ClickFirst: function () {
this.page = 1;
if (this.page < 1) {
this.page = 1;
}
this.Start();
},
ClickLast: function () {
this.page = this.size;
if (this.page > this.size) {
this.page = this.size;
}
this.Start();
},
setFixedButtons: function (e) {
if (this.devicePhone || this.deviceTablet) {
var oButton = new sap.m.Button({
icon: "sap-icon://close-command-field",
press: this.ClickFirst.bind(this)
});
this.container.insertItem(oButton, 0);
var oButton = new sap.m.Button({
icon: "sap-icon://navigation-left-arrow",
press: this.ClickPrev.bind(this)
});
this.container.insertItem(oButton, 1);
oButton = new sap.m.Button({
icon: "sap-icon://navigation-right-arrow",
press: this.ClickNext.bind(this)
});
this.container.insertItem(oButton, this.size + 2);
var oButton = new sap.m.Button({
icon: "sap-icon://open-command-field",
press: this.ClickLast.bind(this)
});
this.container.insertItem(oButton, this.size + 3);
}
else {
var oButton = new sap.m.Button({
text: "First",
press: this.ClickFirst.bind(this)
});
this.container.insertItem(oButton, 0);
oButton = new sap.m.Button({
text: "Next",
press: this.ClickNext.bind(this)
});
this.container.insertItem(oButton, 1);
oButton = new sap.m.Button({
text: "Previous",
press: this.ClickPrev.bind(this)
});
this.container.insertItem(oButton, this.size + 2);
oButton = new sap.m.Button({
text: "Last",
press: this.ClickLast.bind(this)
});
this.container.insertItem(oButton, this.size + 3);
}
},
filterTable: function () {
var aData = this.tableData;
var aDatax = [];
var indexes = {
start: (this.page - 1) * this.countPerPage,
end: (this.page - 1) * this.countPerPage + this.countPerPage - 1,
};
for (var index = 0; index < this.countTable; index++) {
if (indexes.start <= index && indexes.end >= index) {
var item = aData[index];
aDatax.push(item);
}
}
this.table.getModel("tableItems").setData(
{ ProductCollection: aDatax });
}
},If you want to examine the full code structure, you can access it from the link below.
https://github.com/Yunustuzun/Paginator-in-Table-UI5/tree/master/webapp
I didn’t do anything on the View layer to create the Paginator function.In next blog post , I aim to explain how we can activate it with a simple parameter on the View layer of the application, not writing any code on the controller side via custom controls.
