Question

我正在使用AngularJS中的Web应用程序。基本上，它向数据库服务器发出HTTP请求，并显示表中所有声明的信息。该表显示每页100个声明，大约有131页。我的问题是，当我尝试按列对索赔信息进行排序时，它只对每个页面的索赔信息进行排序，而不是对所有数据进行排序（它仅适用于createdDate）。关于如何按列对整个表（所有页面）的数据进行排序的任何想法？

我对AngularJS MVC很新，我的时间紧迫，并且无法实现ngTable（主要是因为我不知道$ data和$ dataset即将到来的地方从）。

这是我的观点（HTML）：

<div class="row" id="dvData">
  <table class="table table-striped table-hover " >
    <thead>
      <tr>
        <th>
          <a href="" ng-click="sortType = 'userName'; sortReverse = !sortReverse">
            Pass Code
            <span ng-show="sortType == 'userName' && sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'userName' && !sortReverse" class="fa fa-caret-up"></span>
          </a>
        </th>

        <th>
          <a href="" ng-click="sortType = 'claimNumber'; sortReverse =! sortReverse">
            Claim Number
            <span ng-show="sortType == 'claimNumber' && sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'claimNumber' && !sortReverse" class="fa fa-caret-up"></span>
          </a>
        </th>
        <th>Vehicle</th>
        <th>Status</th>
        <th>Company Name</th>
        <th>
          <a href="" ng-click="sortType = 'createdDate'; sortReverse = !sortReverse">
            Created
            <span ng-show="sortType == 'createdDate' && sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'createdDate' && !sortReverse" class="fa fa-caret-up"></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="claim in claimList | filter:{claimNumber:searchClaimNumber} | orderBy:sortType:sortReverse">
        <td>{{claim.userName==null?'Not Assigned':claim.userName}}</td>
        <td><a href="#/claim-details" ng-click="selectClaim(claim)">{{claim.claimNumber}}</a></td>
        <td>{{getVehicle(claim)}}</td>
        <td>{{getClaimStatus(claim)}}</td>
        <td>{{getClientName(claim)}}</td>
        <td>{{claim.createdDate| date:'MM/dd/yyyy h:mma'}}</td>
      </tr>
    </tbody>
  </table>

控制器：

angular
    .module('mbeapp')
    .controller('DashboardController', [
        '$scope', 'ClaimService', 'SurveyDataService', '$state', '$http', 'NavigateService', 
        function($scope, ClaimService, SurveyDataService, $state, $http, NavigateService) {

            [...]
            $scope.sortType     = 'createdDate'; // set the default sort type
            $scope.sortReverse  = true;
        }
    ]);

Answer 1

为了对整个数据进行排序，您有两种选择。

您可以立即从后端加载所有数据并创建前端分页。排序/搜索将过滤整个数据集并相应地更改分页。
当用户想要排序/搜索时，您可以将该信息传递给后端并根据条件获取一组新数据。

选项1易于实现，但是当您拥有大型数据集时，它是一个糟糕的选择。选项2是实现目标的理想方式。

示例代码 在控制器中，您可以编写如下函数：

$scope.sortBy = function(keyName){
    $scope.sortReverse = !$scope.sortReverse;
    $scope.sortType = keyName;

    var reqParams = {
        sortBy: keyName,
        sortReverse: $scope.sortReverse
    };

    // do a $http request
    $http.get('http://apiUrl', reqParams).then(function(response){
        $scope.claimList = response.data; // update the claimList data 
    });
};

示例表标题可能如下所示：

<th>
    <a href="" ng-click="sortBy('userName')">Pass Code
        <span ng-show="sortType == 'userName' && sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'userName' && !sortReverse" class="fa fa-caret-up"></span>
    </a>
</th>

您还需要更改以下内容：

<tr ng-repeat="claim in claimList>

按列对AngularJS表中的数据进行排序

1 个答案: