使用 st-pipe 进行智能表分页不起作用

Question

我的分页代码需要帮助 (http://plnkr.co/edit/Jv12fcBzm3lvZFqHqDJm?p=preview)

我的数据很大（>1000K 行）。我只想请求可见记录（每页 50 行）。每次用户更改排序或更改页面时，我都会请求 REST 服务调用。

在我的代码中，我将 $http.post() 替换为 $timeout 以简化示例。

  angular.module('app',['smart-table'])
  .controller('mainCtrl',['Resource', function (service) {
    var ctrl = this;
    this.rowCollection = [];
    this.totalMatched = 0;
    this.totalExecutionTime = 0;
    this.paginationStart = 0;

    this.callServer = function callServer(tableState) {
      ctrl.isLoading = true;
      var pagination = tableState.pagination;
      console.log(pagination.number);
      var start = pagination.start || 0;
      var number = pagination.number || 5;

      service.getPage(start, number, tableState).then(function (result) {
         var tstamp = new Date().getTime();
        console.log('Requesting page: '+start+', '+number+','+tstamp);
        ctrl.rowCollection = result.data.items;
        ctrl.totalMatched = result.data.total;
        ctrl.paginationStart = start;
        tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
        ctrl.isLoading = false;
      });
    };
  }])
  .factory('Resource', ['$q', '$filter', '$timeout', '$http', function ($q, $filter, $timeout, $http)
  {
    function getPage(start, number, params) {

        var deferred = $q.defer();
     $timeout(function () {
          deferred.resolve({
            data:  {total:8000, items:[{message:'foo',messagetime:'2016-01-01'},{message:'foobis',messagetime:'2016-02-02'}]},
            numberOfPages: Math.ceil(1000 / number)
          });
        }, 1500);


        return deferred.promise;
      }

      return {
        getPage: getPage
      };
  }
  ]);

我做错了什么？感谢您的帮助。

Answer 1

在script.js中，你应该替换：

ctrl.rowCollection = result.data.items;     

通过

ctrl.displayedCollection = result.data.items;

这是因为在您的表格标签中，您使用了 st-table="main.displayedCollection" 和 ng-repeat="item in main.displayedCollection"。