Question

当我使用服务器端分页和排序时，是否有人可以帮助我对所有页面进行angularjs排序。

我正在使用ui-bootsrap进行分页; 代码附后。

我的排序只按升序发生一次。任何想法如何在两个方向排序？即我将sortBy作为+属性传递给排序我需要切换属性--Infront一旦按asc顺序排序。任何处理该切换的指令？

＆＃13;

$scope.maxSize = 5;
 $scope.currentPage = 1;
 $scope.itemsPerPage = 5;

//This method gets called each time the page is loaded or move to next page

        $scope.isResultExist = function (list) {
            $scope.list = list;
            return  $scope.populateResult();
        };

  $scope.populateResult = function () {
            if ($scope.list != undefined) {
                $scope.totalItems = $scope.list.length;
                var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
                    , end = begin + $scope.itemsPerPage;

                $scope.result = $scope.list.slice(begin, end);
            }
        };

$scope.sort_by = function (sortBy) {
        if ($scope.list != undefined) {
            var sortOrder = 1;
            $log.debug("**************list : " + $scope.list);
            $scope.list.sort(function (a, b) {
                for (var k = 0; k < $scope.list.length; k++) {
                    var valueA = a[sortBy];
                    var valueB = b[sortBy];
                    var result = (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
                    return result * sortOrder;
                }
            });
            $scope.populateResult();
        }
    };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<th class="source"><a href="#" ng-click="sort_by('source')" data-toggle="tooltip" bs-tooltip
                                          data-title="sort by Source ID">Source ID<i class="fa fa-sort"></i>
                    </a></th>

  <tr data-ng-repeat="keyRingItem in result ">

Pagination:

 <pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage"
                                max-size="maxSize" class="pagination-sm" boundary-links="true">
                    </pagination>

＆＃13;

Answer 1

如果您的分页是在服务器端完成的，那么排序必须在服务器端完成。

Angular只能对其拥有的数据页面进行排序。

实现排序服务器端，或检索所有数据并实现分页客户端。

Answer 2

   $scope.propertyName = 'age';//Amol sorting angularjs
  $scope.reverse = true;
  $scope.Shiftsort = function(propertyName) {
    $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
    $scope.propertyName = propertyName;
  };



    angular.module('orderByExample2', [])
    .controller('ExampleController', ['$scope', function($scope) {
      var friends = [
        {name: 'John',   phone: '555-1212',  age: 10},
        {name: 'Mary',   phone: '555-9876',  age: 19},
        {name: 'Mike',   phone: '555-4321',  age: 21},
        {name: 'Adam',   phone: '555-5678',  age: 35},
        {name: 'Julie',  phone: '555-8765',  age: 29}
      ];

      $scope.propertyName = 'age';
      $scope.reverse = true;
      $scope.friends = friends;

      $scope.sortBy = function(propertyName) {
        $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
        $scope.propertyName = propertyName;
      };
    }]);
    .friends {
      border-collapse: collapse;
    }

    .friends th {
      border-bottom: 1px solid;
    }
    .friends td, .friends th {
      border-left: 1px solid;
      padding: 5px 10px;
    }
    .friends td:first-child, .friends th:first-child {
      border-left: none;
    }

    .sortorder:after {
      content: '\25b2';   // BLACK UP-POINTING TRIANGLE
    }
    .sortorder.reverse:after {
      content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
    <div ng-controller="ExampleController">
      <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
      <hr/>
      <button ng-click="propertyName = null; reverse = false">Set to unsorted</button>
      <hr/>
      <table class="friends">
        <tr>
          <th>
            <button ng-click="sortBy('name')">Name</button>
            <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
          </th>
          <th>
            <button ng-click="sortBy('phone')">Phone Number</button>
            <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span>
          </th>
          <th>
            <button ng-click="sortBy('age')">Age</button>
            <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span>
          </th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    </div>

AngularJs对所有页面进行排序

2 个答案: