SAP UI5 to Implement "go to" specific page on the table

user_5059931 0
Viewed 899

I am new to SAP UI5 development. Currently the table is using "growing" and "growingThreshhold", then users can click more to see data of next page. Since we have thousands of data in that table, it takes user time to click more and more again to load next page data. we try to implement a function, that user can enter the page number then click a button and go to the specific page.

<Table id="genTable" growing="true" growingThreshold="60" fixedLayout="false" selectionChange="onHandleSelectChange"
    backgroundDesign="Solid" updateFinished="onHandleGeneratorQueueUpdateFinished">

Expected UI: enter image description here

I added a bar then UI display is good.

<Bar design="SubHeader">
    <contentMiddle>
        <Input type="Number" id="pageNumber" width="50px"></Input>
        <Button id="goToButton" text="Go to" type="Emphasized"  press="onHandleGoTo"></Button>
    </contentMiddle>
</Bar>

For the backend logic, I refer to below articles, but still doesn't work.

I tried to use read, the it can get the data back from odata service, but the data can't be refreshed in the table.

oModel.read("/ViewQueueSet", {
                urlParameters: {
                    "$top": top,
                    "$skip": count
                },
                filters: [new Filter("RoleCode", FilterOperator.EQ, "G")],
                useBatch: true,
                success: function (tdata) { //successful Read in the server
                    var json = new JSONModel();
                    json.setData(tdata);
                    that.getView().setModel(json,"sapmodel");   
                    sap.ui.core.BusyIndicator.hide();
                },
                error: function () {
                    sap.ui.core.BusyIndicator.hide();
                }
            });
        }

also tried to call bindItems

//that.getView().setModel(json,"sapmodel");   
//oTable.setModel(json); //JSON is preferred data format
//oTable.bindItems("/results",that.oGenQueueTemplate);
that.getView().byId("genTable").setModel(json);
that.getView().byId("genTable").bindItems("/results",that.oGenQueueTemplate);

Another approach I tried is to use bindItems, it call send the request to odata service, but it doesn't add the parameter top and skip parameter.

oTable.bindItems({
    path: "/ViewQueueSet",
    model: "sapmodel",
    filters: [new Filter("RoleCode", FilterOperator.EQ, "G")],
    template: this.oGenQueueTemplate,
    //   urlParameters: {
    //  "$top": top,
    //  "$skip": count
    // },
    parameters: {
        "$top": top,
        "$skip": count
    }
});

Anyone has any idea about how to implement this functionality?

sapui5 pagination
1 Answers

before I go into detail, please consider using other controls and/or ux patterns. imagine having thousands or millions of elements in backend and user equests to scroll to page 9292929 => for a responsive table (sap.m.Table) you would need to load all elements up to that page. Maybe filtering or some completely different approach could be tha right one.

The correct way to do this is by getting the listbinding and ask it to load more elements. how to ask the binding, may depend on the type of binding as well.

oTable = ... // get a reference on table
oItemsBinding = oTable.getBinding("items");
oItemsBinding.getLength() // will give you total number of elements
oItemsBinding.isLengthFinal() // will tell you if the length is final
oItemsBinding.getCurrentContexts() // will give you array of all loaded contexts.

now a few words to length and the length being final. If you have a binding implementation that knows the total number of objects (e.g. json - since it loads all elements to client, or OData, if cont is implemented in backend) then getLength will tell you the total number of objects.

if the backend doesnt have the count feature implemented, the length becomes final once you reach the end of the list (backend gives you less elements than you require - e.g. top=10,skip=90 returns 10 elements => length 100, not final; top=10,skip=100 returns 4 elements => length=104 becomes final)

Now, you can have a look at various binding implementations. But be aware that there is a lot to consider (direction of growing - upwards/downwards), at least you dont need to think about filtering/sorting - as this is part of the binding.

There is a nice (private) feature in sap.m.Table (or in sap.m.ListBase, to be more precise), which is called GrowingEnablement. you can use it like this:

// dont forget if _oGrowingDelagate is not undefined or similar
oTable._oGrowingDelegate.requestNewPage()

this will load one more page => you could start from reading the implementation of this method if you want to load several pages in one go.

you could also do a simple trick:

// assume you have 20 elements per page (default) 
// and want to get to 7th page (elements 121 - 140) 

// ckecks for 7th page exists and 7th page not yet loaded are omitted

oTable.setGrowingThreshold(70) // half of 140, so following load will load second page => 71 to 140
oTable._oGrowingDelegate.requestNewPage() // this will load the second page 71 - 140

// once loading is finished (take care of asynchronity) 

oItemsBinding.attachEventOnce("dataReceived", function(oEvent){
   // reset the growing threshold to 20 
   oTable.setGrowingThreshold(20) 

   // scroll to first element of 7th page (index 120, since count starts from 0)
   oTable.scrollToInex(120)
})
user_34340270
Related