SAPUI5 – Pagination in sap.m Table on button click using JSON Data

Hi, in this blog I’m going to explain the pagination in sap.m Table with json data.

In this example, I am using Northwind model Products entity set data that stored in json model that contains 20 records and I have to display 5 records per click.

So, I have placed four nav buttons for First page (<<), Previous page (<), Next page (>), Last page (>>) with page count information and then some magical code.

Firstly, in Products View use the following code to display table data and buttons.

<mvc:View controllerName="com.zproducts.controller.Products"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
            <Table id="idProductsTable" busy="{ProductsModel>/isProductsDataLoading}" items="{ path: 'ProductsModel>/tableData'}">
                <columns>
                    <Column >
                        <Text text="Product Id" />
                    </Column>
                    <Column >
                        <Text text="Product Name" />
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <ObjectIdentifier title="{ProductsModel>ProductID}" />
                            <Text text="{ProductsModel>ProductName}" />
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
            <OverflowToolbar >
                <ToolbarSpacer />
                <Button id="BtnFirstPressId" icon="sap-icon://close-command-field" press="onFirstPress" tooltip="First" enabled="{NavModel>/firstPageBtnEnable}" />
                <Button id="BtnPreviousPressId" icon="sap-icon://navigation-left-arrow" press="onPreviousPress" tooltip="Previous" enabled="{NavModel>/firstPageBtnEnable}" />
                <Text id="PageTextId" text="{i18n>page} {ProductsModel>/page} {i18n>of} {ProductsModel>/totalPages}" />
                <Button id="BtnNextPressId" icon="sap-icon://navigation-right-arrow" press="onNextPress" tooltip="Next" enabled="{NavModel>/nextPageBtnEnable}" />
                <Button id="BtnLastPressId" icon="sap-icon://open-command-field" press="onLastPress" tooltip="Last" enabled="{NavModel>/nextPageBtnEnable}" />
            </OverflowToolbar>
        </content>
    </Page>
</mvc:View>

Secondly in controller in onInit function paste the following code to define json models and read products data using Northwind oData model.

onInit: function () {
                var that = this;

                //Stores products data and indexes data
                var oProductsModel = new JSONModel ({
                    productsData: [],
                    isProductsDataLoading: true,
                    tableData: [],
                    startIndex: 0,
                    endIndex: 0,
                    noOfTableRows: 5,
                    page: 0,
                    totalPages: 0
                });
                that.getView().setModel(oProductsModel, "ProductsModel");

                //Stores Nav buttons enable properties
                var oNavModel = new JSONModel({
                    firstPageBtnEnable: false,
                    nextPageBtnEnable: false
                });
                that.getView().setModel(oNavModel, "NavModel");

                var oModel = that.getOwnerComponent().getModel("NorthwindModel");
                oModel.read("/Products", {
                    success: function (oData) {
                        //Stores the Produsts data
                        that.getView().getModel("ProductsModel").setProperty("/productsData", oData.results);
                        that.getView().getModel("ProductsModel").setProperty("/isProductsDataLoading", false);
                        //Sets total page count
                        var noOfTableRows = parseInt(that.getView().getModel("ProductsModel").getProperty("/noOfTableRows"));
                        that.getView().getModel("ProductsModel").setProperty("/totalPages", Math.ceil(oData.results.length / noOfTableRows));
                        //To get data for first view
                        that.onFirstPress();
                    },
                    error: function (oError) {
                        that.getView().getModel("ProductsModel").setProperty("/isProductsDataLoading", false);
                    }
                });
            }

Now Paste the following code in the controller to handle nav buttons functionality and current page value.

            //set first selected number of visible rows to table
            onFirstPress: function () {
                var that = this;
                var data = that.getView().getModel("ProductsModel").getProperty("/productsData");
                var noOfTableRows = parseInt(that.getView().getModel("ProductsModel").getProperty("/noOfTableRows"));
                var newData = data.slice(0, noOfTableRows);

                //To set Table Data
                that.fnSetTableData(newData, 0, noOfTableRows - 1, 1);
            },

            //set previous selected number of visible rows to table
            onPreviousPress: function () {
                var that = this;
                var data = that.getView().getModel("ProductsModel").getProperty("/productsData");
                var noOfTableRows = parseInt(that.getView().getModel("ProductsModel").getProperty("/noOfTableRows"));
                var startIndex = that.getView().getModel("ProductsModel").getProperty("/startIndex");
                var newData = data.slice(startIndex - noOfTableRows, startIndex);

                //To set Table Data
                that.fnSetTableData(newData, startIndex - noOfTableRows, startIndex - 1, that.getView().getModel("ProductsModel").getProperty("/page") - 1);

            },

            //set next selected number of visible rows to table
            onNextPress: function () {
                var that = this;
                var data = that.getView().getModel("ProductsModel").getProperty("/productsData");
                var noOfTableRows = parseInt(that.getView().getModel("ProductsModel").getProperty("/noOfTableRows"));
                var endIndex = that.getView().getModel("ProductsModel").getProperty("/endIndex");
                var newData = data.slice(endIndex + 1, endIndex + 1 + noOfTableRows);

                //To set Table Data
                that.fnSetTableData(newData, endIndex + 1, endIndex + noOfTableRows, that.getView().getModel("ProductsModel").getProperty("/page") + 1);
            },

            //set last selected number of visible rows to table
            onLastPress: function () {
                var that = this;
                var data = that.getView().getModel("ProductsModel").getProperty("/productsData");
                var noOfTableRows = parseInt(that.getView().getModel("ProductsModel").getProperty("/noOfTableRows"));
                var startIndex;
                var oIndex = data.length % noOfTableRows;
                if (oIndex === 0) {
                    startIndex = data.length - noOfTableRows;
                } else {
                    startIndex = data.length - oIndex;
                }  
                var newData = data.slice(startIndex);

                //To set Table Data
                that.fnSetTableData(newData, startIndex, data.length, Math.ceil(data.length / noOfTableRows));
            },

            //Sets the table data
            fnSetTableData: function (newData, startIndex, endIndex, page) {
                var that = this;
                that.getView().getModel("ProductsModel").setProperty("/tableData", newData);
                that.getView().getModel("ProductsModel").setProperty("/startIndex", startIndex);
                that.getView().getModel("ProductsModel").setProperty("/endIndex", endIndex);
                //Sets Current page count
                that.getView().getModel("ProductsModel").setProperty("/page", page);
                //To Enable the nav bottons
                that.fnNavButtonsEnable();
            },

            //sets navigations buttons enable
            fnNavButtonsEnable: function () {
                var that = this;
                var data = that.getView().getModel("ProductsModel").getProperty("/productsData");
                var startIndex = that.getView().getModel("ProductsModel").getProperty("/startIndex");
                var endIndex = that.getView().getModel("ProductsModel").getProperty("/endIndex");
                
                //Enable or disable next and last buttons
                if (data.length > endIndex + 1) {
                    that.getView().getModel("NavModel").setProperty("/nextPageBtnEnable", true);
                } else {
                    that.getView().getModel("NavModel").setProperty("/nextPageBtnEnable", false);
                }
                
                //Enable or disable first and previous buttons
                if (startIndex === 0) {
                    that.getView().getModel("NavModel").setProperty("/firstPageBtnEnable", false);
                } else {
                    that.getView().getModel("NavModel").setProperty("/firstPageBtnEnable", true);
                }
            }

Save and Run the application.

In the initial screen, you will see first (<<) and previous (<) buttons are disabled and current page is 1 in 4 pages.

When you click on next (>) button, you will see all buttons are enabled and current page is 2 in 4 pages.

When you click on last (>>) button, you will see next (>) and last (>>) buttons are disabled and current page is 4 in 4 pages.

That’s it!!!