SAPUI5 GridList手动服务端分页：Load More按钮不显示及方案咨询

1. 修复基于JSONModel的手动实现 #

GridList的growing功能要显示“Load More”按钮，核心是需要知道服务器总数据量与当前已加载数据量的对比。JSONModel本身不具备ODataModel的计数管理能力，所以需要手动维护总计数并控制按钮显示逻辑：

关键修改步骤： #

• 初始加载时保存OData返回的__count值
• 手动判断已加载数据量是否小于总计数，以此控制“Load More”按钮的显示/隐藏
• 关闭GridList的自动growing，改用自定义按钮触发加载逻辑

修改后的控制器代码：

onInit: function () {
    this._bIsLoading = false;
    this._totalCount = 0; // 新增：存储服务器总数据条数
    this.data = { results: []};  
    this.loadPageData(false); // 加载初始数据
},

loadPageData: function (bAppend) {
    var that = this;
    if (this._bIsLoading) {
        return;
    }
    this._bIsLoading = true;
    var skip = bAppend ? this.data.results.length : 0;
    var top = 5; 
    var query = "&$orderby=ModifiedAt%20desc&$top=" + top + "&$skip=" + skip + "&$inlinecount=allpages&$format=json";

    var pageRequest = ModelFactory.getInstance().getOdataModel("dummy.svc", "dummypath").findAll({
        "where": query
    }, {
        async: true
    });
    
    $.when(pageRequest).done(function (oLatestData) {
        if (!bAppend) {
            // 初始加载时保存总计数
            that._totalCount = parseInt(oLatestData.d.__count, 10);
            that.data = oLatestData.d;
            var oModel = new JSONModel(that.data);
            that.getView().setModel(oModel);
        } else {
            that.data.results = that.data.results.concat(oLatestData.d.results);
            that.getView().getModel().refresh();
        }
        // 更新按钮显示状态
        that._updateLoadMoreButton();
        that._bIsLoading = false;
    });
},

_updateLoadMoreButton: function() {
    var oButton = this.getView().byId("loadMoreBtn");
    if (oButton) {
        oButton.setVisible(this.data.results.length < this._totalCount);
    }
},

// 自定义加载更多按钮点击事件
onLoadMorePress: function() {
    this.loadPageData(true);
}

修改后的XML代码：

<f:GridList
    id="gridList"
    items="{/results}"
    growing="false" <!-- 关闭自动growing逻辑 -->
>
    <!-- 列表项模板 -->
</f:GridList>
<Button
    id="loadMoreBtn"
    text="Load More"
    press=".onLoadMorePress"
    visible="false" <!-- 初始隐藏，加载后判断显示 -->
/>

2. 切换到ODataModel的推荐方案 #

UI5的ODataModel（V2/V4）原生支持服务端分页、过滤、搜索，无需手动拼接$top/$skip，是官方推荐的实现方式，代码更简洁可靠。

最简配置步骤： #

1. 编程创建ODataModel并绑定到视图

onInit: function () {
    // 创建OData V2模型（根据你的服务版本调整）
    var oODataModel = new sap.ui.model.odata.v2.ODataModel({
        serviceUrl: "/path/to/your/dummy.svc/",
        defaultBindingMode: "TwoWay",
        defaultCountMode: "Inline" // 启用内联计数，自动获取总条数
    });
    this.getView().setModel(oODataModel);
}

2. 配置GridList的自动分页绑定

<f:GridList
    id="gridList"
    items="{
        path: '/dummypath',
        parameters: {
            $orderby: 'ModifiedAt desc',
            countMode: 'Inline'
        }
    }"
    growing="true"
    growingThreshold="5"
    growingScrollToLoad="false" <!-- 按钮触发分页设为false，滚动加载设为true -->
>
    <!-- 列表项模板 -->
</f:GridList>

3. 静态过滤与动态搜索处理

• 静态过滤：直接在绑定参数中添加$filter

  items="{
      path: '/dummypath',
      parameters: {
          $orderby: 'ModifiedAt desc',
          $filter: 'Status eq \'Active\'',
          countMode: 'Inline'
      }
  }"
  

• 动态搜索：通过控制器修改绑定的过滤条件

  onSearch: function(oEvent) {
      var sQuery = oEvent.getParameter("query");
      var oList = this.getView().byId("gridList");
      var oBinding = oList.getBinding("items");
      var oFilter = new sap.ui.model.Filter("TargetField", sap.ui.model.FilterOperator.Contains, sQuery);
      oBinding.filter([oFilter]); // ODataModel自动发起带$filter的服务请求
  }
  

方案优势： #

• 自动处理分页参数拼接，无需手动计算$skip/$top
• 根据服务返回的__count自动控制“Load More”按钮显示
• 原生支持服务端过滤、排序、搜索，性能更优
• 减少手动维护数据的代码量，降低出错概率

内容的提问来源于stack exchange，提问作者Nandikaa Thiyagarajan