Smart Table pagination with st-pipe doesn't work

Question

I need a help with my pagination code (http://plnkr.co/edit/Jv12fcBzm3lvZFqHqDJm?p=preview)

My data is huge (>1000K rows). I want to make request only for visible records (50 rows per page). I request REST service call every time when user change sorting or change page.

In my code I replaced $http.post() by $timeout to simplify example.

  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
      };
  }
  ]);

What I'm doing wrong? Appreciate for any help.

henriquels henriquels · Accepted Answer · 2016-08-22T23:08:48

In the script.js, you should replace:

ctrl.rowCollection = result.data.items;

by

ctrl.displayedCollection = result.data.items;

That's because in your table tag, you used st-table="main.displayedCollection" and ng-repeat="item in main.displayedCollection".

Smart Table pagination with st-pipe doesn't work

1 Answers