Search code examples
sapui5

SAPUI5 filter table performance


I have a table with 3 columns holding at most 6000 elements. Above that table I have a SearchField. When something is typed into the SearchField, the table is filtered by 2 of the 3 columns (using liveChange) like this:

var oTable = this.getView().byId("idMyTable");
var oBinding = oTable.getBinding("items");
oBinding.filter(new sap.ui.model.Filter([
                    new sap.ui.model.Filter("col1", sap.ui.model.FilterOperator.Contains, sInput),
                    new sap.ui.model.Filter("col2", sap.ui.model.FilterOperator.Contains, sInput),

                ], false), "Application");

While this solutions works, it needs almost 5 seconds to complete (for only 6000 elements in the table) and another bit of time until the data in the table is displayed again.

When the table is being filled, its size limit is set to the length of data which is in the model:

// rs0 is the result set of the db query which contains the data
tableModel.setSizeLimit(tableModel.getData().rs0.length);

When I omit the call for setSizeLimit the search is quiet fast but I can't scroll through all items in the table (not everything is displayed).

My questions is: How can I display all values in the table and keep a good search performance at the same time?

Thanks in advance!


Solution

  • I finally found a solution for my problem. Instead of using setSizeLimit on the model, I'm now using the grow property on the table itself. This allows my table to load data time by time when the user scrolls down. Thus my table declaration now looks like this:

    <Table [...] visibleRowCountMode="Fixed" visibleRowCount="8" growing="true" 
        growingScrollToLoad="true" growingThreshold="100" threshold="100" >
    

    The grow property is described here:

    https://sapui5.netweaver.ondemand.com/1.30.7/docs/guide/9164ba7047b74a25a19baf9c5bb986ae.html

    An excerpt (if the link dies):

    growing: Boolean to set the growing feature to on or off
    growingScrollToLoad: If you want to allow more data to be fetched when the user scrolls down to the end of the current items, set this boolean property to true; otherwise a trigger button must be used
    growingThreshold: The number of items that are requested each time from the model
    growingTriggerText: The text on a trigger button used to cause a request for more data