角度分页列在客户端

Question

我试图让这个工作，并看看是否有一个快速简单的解决方案 - 现在我有一个表，我在客户端进行分页和排序。目前在页面加载时我按日期设置默认排序，但是还有2个其他列可以单击和排序。它正在工作，但只在当前查看的页面上，不会渗透到其他页面。这是我的排序功能和分页功能。感谢任何帮助！

    $scope.sortBy = function(keyName){
        if($scope.sortType === keyName){
            $scope.sortReverse = !$scope.sortReverse;
        } else{
            $scope.sortReverse = false;
        }
        $scope.sortType = keyName;
        console.log('Type', $scope.sortType, 'Reverse', $scope.sortReverse);
    };

    function setPage(page) {
        if (page < 1 || page > vm.pager.totalPages) {
            return;
        }

        // get pager object from service
        vm.pager = PagerService.GetPager(vm.uploads.length, page);

        // get current page of items
        vm.uploads.sort(function(a,b){
            return new Date(b.uploadDate).getTime()- new Date(a.uploadDate).getTime();
        })

        vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
    }

这是html表代码：

                <div>
                    <table class="table">
                        <tr>
                            <th ng-click="sortBy('uploadDate')" >Upload Date
                                <span ng-show="sortType == 'uploadDate' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'uploadDate' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Product</th>
                            <th>Comments</th>
                            <th ng-click="sortBy('templateName')">Template
                                <span ng-show="sortType == 'templateName' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'templateName' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Last Updated By</th>
                            <th>Last Updated</th>
                            <th ng-click="sortBy(statusName)">Status
                                <span ng-show="sortType == 'statusName' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'statusName' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="upload in vm.items | orderBy:sortType:sortReverse">
                            <td style="white-space: nowrap;">{{upload.uploadDate}}</td>
                            <td>{{upload.product}}</td>
                            <td style="white-space: nowrap;">{{upload.comments}}</td>
                            <td style="white-space: nowrap;">{{upload.templateName}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdatedByUser}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdateDate}}</td>
                            <td style="white-space: nowrap;">{{upload.status.statusName}}</td>
                            <td>
                                <button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statusCd === 'NEW' || upload.status.statusCd === 'ERROR'" ng-click="vm.loadStagingPage(upload.dataLoadExecutionId, upload.product, upload.status)">View</button>
                                <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.cancelDataExecution(upload.dataLoadExecutionId)" ng-show="upload.inProgress || upload.status.statusCd === 'ERROR'">Remove</span>
                            </td>
                        </tr>
                    </table>
                <div class="text-center">
                   <ul ng-if="vm.pager.pages.length" class="pagination">
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(1)">First</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
                        </li>
                        <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
                            <a ng-click="vm.setPage(page)">{{page}}</a>
                        </li>               
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
                        </li>
                    </ul>
                </div>
                </div>

Answer 1

在拼接当前页面之前，您必须根据$scope.sortType对集合进行排序。

如果您在更改$scope.sortType

时返回第1页，情况会更好

$scope.sortBy = function(keyName){
    var changedSortType = $scope.sortType === keyName;
    $scope.sortType = keyName;
    if(changedSortType){
        $scope.sortReverse = !$scope.sortReverse;
    } else{
        $scope.sortReverse = false;
        setPage(1);
    }

    console.log('Type', $scope.sortType, 'Reverse', $scope.sortReverse);
};

function setPage(page) {
    if (page < 1 || page > vm.pager.totalPages) {
        return;
    }

    // get pager object from service
    vm.pager = PagerService.GetPager(vm.uploads.length, page);

    // get current page of items
    vm.uploads.sort(function(a,b){
        // here you should sort based on $scope.sortType
        var result;
        switch($scope.sortType) {
            case 'uploadDate':
                result = new Date(b.uploadDate).getTime()- new Date(a.uploadDate).getTime();
                break;
            case 'templateName':
                if(a.templateName < b.templateName) result = -1;
                if(a.templateName > b.templateName) result = 1;
                result = 0;
                break;
            // ...
        }
        if ($scope.sortReverse) {
            result *= -1;
        }
        return result;
    })

    vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
}