分页被“卡住”了？

Question

我有一个简单的表应用程序，它显示包含名称，数字，日期等列的虚拟数据。您可以按列对其进行排序，并对其进行分页。

但是，当我使用分页时，有些行会卡在顶部。它按照我想要的列按字母顺序排序，但是当页面发生变化时（假装第4页），下面的行会改变前几行，而最顶行则不会发生变化让步。

Here is a functional plunker:

HTML：

 <pagination class="pagination pagination-sm" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
   <table class="table table-hover">
      <tr>
        <th ng-repeat="key in keys" ng-click="sorting.predicate=key;">
        {{key}}
      </th>
      </tr>

      <tr ng-repeat="row in data | startFrom:currentRow | orderBy:sorting.predicate:sorting.reverse | limitTo:itemsPerPage">
        <td ng-repeat="key in keys">
          {{row[key]}}
        </td>
      </tr>
    </table>

角：

app.filter('startFrom', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    };
});

    $scope.data = [{
        "id": 0,
        "age": 30,
        "name": "Trina Pace",
        "gender": "female",
        "email": "trinapace@darwinium.com",
        "phone": "+1 (874) 414-2654"
    },etc..];

    $scope.keys = Object.keys($scope.data[0]);
    $scope.totalItems = $scope.data.length;
    $scope.itemsPerPage = 25;
    $scope.currentPage = 1;
    $scope.currentRow = 0;

    $scope.pageChanged = function () {
      $scope.currentRow = ($scope.currentPage - 1) * $scope.itemsPerPage;
      console.log('current row: ' + $scope.currentRow);
      console.log('items per page: ' + $scope.itemsPerPage);
    };

    $scope.sorting = {predicate:'name',reverse:false};

我错过了，和/或做错了什么？

Answer 1

将startFrom:currentRow移至orderBy:sorting.predicate:sorting.reverse之后。

您希望在排序后过滤。

Answer 2

http://plnkr.co/edit/7BbgJ4TMU0pSY8gyDLef?p=preview

<table class="table table-hover">
      <tr>
        <th ng-repeat="key in keys" ng-click="sorting.predicate=key;">
        {{key}}
      </th>
      </tr>

      <tr ng-repeat="row in data |  orderBy:sorting.predicate:sorting.reverse | startFrom:currentRow | limitTo:itemsPerPage">
        <td ng-repeat="key in keys">
          {{row[key]}}
        </td>
      </tr>
    </table>