Angular column sort clicking header

Question

I'm trying to enable sorting on all the data, as I'm also doing pagination on the client side. I'm having another issue with the paging that it is only showing the first 25 records and when I change pages, the new set of 25 records does not show, but I would like to figure out this sorting issue.

function DataUploadHistoryController($window, $scope, $modal, $state, toaster, PagerService, DataUploadHistoryFactory, $timeout) {
    var vm = this;

    vm.uploads = [];
    vm.includeCancelled = false;
    vm.uploadDataModal = {};
    vm.pager = {};
    vm.setPage = setPage;
    vm.itemsByPage=25;
    $scope.sortType = 'uploadDate';
    $scope.sortReverse = true;

    activate();

    function activate() {
        getUploadHistory();
        $scope.$watch('vm.includeCancelled', getUploadHistory);
        $scope.$on('closeUploadModal', function(event, response) {
            if (vm.uploadDataModal.opened) {
                vm.uploadDataModal.close();
                getUploadHistory();

                var poller = function() {
                    DataUploadHistoryFactory.getUploadById(response.dataLoadExecutionId).success(function(response) {
                        if(response.status.statusCd !== 'NEW'){
                            if(response.status.statusCd === 'ERROR')
                                toaster.error('Could not load execution. Please remove.');
                            else
                                toaster.success('Data execution load complete.');
                            getUploadHistory();
                            return;
                        }
                        $timeout(poller, 5000);
                    })
                }
                poller();

            };
        });
        $scope.$on('cancelUploadModal', function(event, response) {
            if (vm.uploadDataModal.opened) {
                vm.uploadDataModal.close();
                getUploadHistory();

            };
        });
        /*
        $scope.$on('closeDownloadTemplateModal', function() {
            if (vm.downloadTemplateModal.opened)
                vm.downloadTemplateModal.close();
        });
        */
    }

    var checkProcessingPoller = function() {
        DataUploadHistoryFactory.getUploadHistory(vm.includeCancelled).then(
                function(response) {
                    _.each(response.data, function(upload) {
                        if(upload.processing = upload.status && ['PROCESSING'].indexOf(upload.status.statusCd.trim()) > -1){
                            $timeout(checkProcessingPoller, 5000);
                            console.log("Checking Status");
                        }
                    });
                    vm.uploads = response.data;
                });
    }
    checkProcessingPoller();

    function getUploadHistory() {
        DataUploadHistoryFactory.getUploadHistory(vm.includeCancelled).then(
            function(response) {
                _.each(response.data, function(upload) {
                    upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1;
                });
                vm.uploads = response.data;

                if($state.params.reupload){
                    uploadProductionData();
                    $state.params.reupload = false;
                }
                vm.setPage(1);
                vm.itemsByPage=25;
            });
    }

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

Here is the html

<div class="chrthdr" ui-view="header"></div>
<div id="userResults">
<div class="card card-full-width">
    <div class="card-header dark-blue">
        <a class="card-config" data-toggle="uploadHistory" data-placement="left"><i class="glyphicon glyphicon-info-sign"></i></a>
        <div class="card-title">Data History</div>
    </div>
    <div class='form-horizontal range-date' style="overflow-y: auto;">
        <form>
            <div class="panel-body">
                <div>
                    <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px;  margin-right: 5px" type="button" ng-click="vm.uploadProductionData()">Upload Data</span>
                    <label>
                        <input type="checkbox" ng-model="vm.includeCancelled">Include removed executions
                    </label>
                    <!--<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-left: 5px" type="button" ng-click="vm.viewTemplates()">Download Template</span>-->
                </div>
                <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>Status
                                <span class="fa fa-caret-down"></span>
                            </th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage">
                            <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>
            </div>
        </form>
    </div>
</div>

austinthedeveloper · Accepted Answer · 2016-07-22 21:21:47Z

2

Fixing the header clicks is pretty simple. Here's what you currently have:

ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage"

It needs to be updated to:

ng-repeat="upload in vm.uploads | orderBy:sortType:sortReverse | limitTo: vm.itemsByPage"

In order for reverse to work correctly when switching columns, it needs to check if the current sorted item is selected:

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

answered Jul 22, 2016 at 21:21

austinthedeveloper

2,63923 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Buccaneer Over a year ago

Thank you - the orginal orderBy I had by uploadDate was the default sort I wanted to display - is there a way to maintain the default sort?

austinthedeveloper Over a year ago

Not sure if I'm understanding you. Since you defined it at the top ($scope.sortType = 'uploadDate';), it will default to that when that controller is first hit

Buccaneer Over a year ago

sorry for the confusion, i also implemented paging with google logic on here, and it breaks each page into results of 25, and when i select a sort, it sorts based on the results just for that page - so if there is a sort on template name on page 1, it will only sort those alphabetically for the results shows on page 1, not the entire result set, so when i goto another page, the same sort will be there, but it again it only sorts the 25 records on that particular page.

Buccaneer Over a year ago

The end result I'd like is when a sort is selected, it will sort for the entire data set, not just the results which are showing. Can I do that within my sortBy function?

austinthedeveloper Over a year ago

What you're asking for is server-side pagination. You'll need to see if whatever data you're pulling from supports parameters like order, sort, and skip/take.

|

Collectives™ on Stack Overflow

Angular column sort clicking header

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related