cancel
Showing results for 
Search instead for 
Did you mean: 

Load huge data

Former Member
0 Kudos

Hello everybody,

I have a server query with 70,000 records. This takes about 6 seconds. This data I insert into a m.Table.

My question is now, if I only want to display the first 100 records and only by scrolling another 100, I still have to load the complete data set (70,000) before? Or is it possible to query the files from the server only when scrolling?

Best regards

Yannick

boghyon
Product and Topic Expert
Product and Topic Expert

I'd strongly discourage using sap.m.Table over sap.ui.table.Table if you need to display more than about 100 items. Even Chrome will face performance issues. IE was unusable in my experience because of that. sap.ui.table.Table solves the problem because its DOM element doesn't "grow" as List does. When scrolling occurs and your OData is bound to the table directly (without a JSONModel in between), UI5 will handle updating data automatically by sending requests with "top" & "skip", which enables dealing with a huge amount of data seamlessly.

The only disadvantage of sap.ui.table.Table is that its design is not responsive.

Accepted Solutions (0)

Answers (2)

Answers (2)

Ryan-Crosby
Active Contributor
0 Kudos

A user is going to spend time scrolling through 70,000 records? I think they should get a medal for patience. My best suggestion would be to review the business process instead of trying to handle it in code.

Former Member
0 Kudos

No of course not! It's just for testing.

Ryan-Crosby
Active Contributor
0 Kudos

Ah ok, test on then... I think the others have given you some options to work with thus far.

junwu
Active Contributor
0 Kudos
Former Member
0 Kudos

Thank you! I have never worked with oData, so I still have some problems.

So I load all the data from the server. What do I have to do? I guess I need to change something in the XML view.

<List
     id="test"
     items ="{
         path: 'employees>/'}"
     headerText="Employees"
     growing="true"
     growingThreshold="4"
     growingScrollToLoad="true">

     <StandardListItem
         title="{employees>USERID}"
     />
</List>

      
onInit : function() {
      var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
      var jsonModel = new sap.ui.model.json.JSONModel();
      oModel.read("/Employee",null,null,true,function(oData,response){
             jsonModel.setData(oData.results)
      })
      this.getView().setModel(jsonModel, "employees");
}
Former Member

We could use $top & $skip approach.

  • In onInit, we could fetch only the top 5 records and populate the table
onInit: function () {
   var oModel = new sap.ui.model.odata.v2.ODataModel("EmployeeODataService.xsodata/", true);
    oModel.read("/Employee?$top=5", null,null,true, function(oData){
        var jsonModel = new sap.ui.model.json.JSONModel();
        jsonModel.setData(oData);
        this.getView().setModel(jsonModel, "employees");
    }.bind(this));
}
  • Store the value of total rows so far in a variable (eg: fetchedRecords)
  • Rather than growing=true, Place a button at the footer to fetch more records & onPress call the function to fetch the next set and append that to the model
var oModel = sap.ui.getCore().getModel();
oModel.read("/Employee?$top=5&skip="+fetchedRecords, null,null,true, function(oData){
    var oTableModel = this.getView().getModel("employees"); //Get your table model
    var aTableData = oTableModel.getProperty("/modelData/data"); // Get entries
    aTableData.push.apply(aTableData, aData); // Add more entries
    oTableModel.setProperty("/modelData/data", aTableData); // // Update model
}.bind(this));

Note: I haven't tested this approach. I have seen people using $top & $skip approach in paginations. However, I feel that we can use this for growing table as well.

Former Member
0 Kudos

Thank you very much! I've changed it to this:

onInit : function() {
    var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
    var jsonModel = new sap.ui.model.json.JSONModel();
    oModel.read("/Employee?$top=50",null,null,true,function(oData,response){
         jsonModel.setData(oData.results)
         this.getView().setModel(jsonModel, "employees");
         fetchedRecords = fetchedRecords + 50;
    }.bind(this));
},

grow : function() {
    var oModel = new sap.ui.model.odata.ODataModel("EmployeeODataService.xsodata/", true);
    oModel.read("/Employee?$skip="+fetchedRecords+"&$top=50", null,null,true, function(oData){
         var oTableModel = this.getView().getModel("employees"); //Get your table model
         var aTableData = oTableModel.getData(); // Get entries
         aTableData.push.apply(aTableData, oData.results); // Add more entries
         oTableModel.setData(aTableData); // // Update model
         fetchedRecords = fetchedRecords + 50;
    }.bind(this));
}
<br>