AngularJS + ASP.NET Web API: Building a Simple Grid in AngularJS with Server-side Paging, Sorting, Searching (Part 6)

In this post, I’ll incorporate the ability to sort the grid based on either the last name or the first name.

First, modify the API GetStudents method to be as follows:

public StudentsContainer GetStudents
   (int currentPage, int recordsPerPage, string sortKey, string sortOrder)
       {

           var pageNumber = currentPage;
           var pageSize = recordsPerPage;
           var begin = (pageNumber - 1) * pageSize;

           var totalNumberOfRecords = db.Students.Count();
           List results = null;
           switch (sortOrder)
           {
               case "ASC":
                   switch (sortKey)
                   {
                       case "lastName":
                           results = db.Students.OrderBy
                   (r =>r.LastName).Skip(begin).Take(pageSize).ToList();
                           break;
                       case "firstName":
                           results = db.Students.OrderBy
                   (r =>r.FirstMidName).Skip(begin).Take(pageSize).ToList();
                           break;
                   }
                   break;
               case "DESC":
                   switch (sortKey)
                   {
                       case "lastName":
                           results = db.Students.OrderByDescending
                   (r =>r.LastName).Skip(begin).Take(pageSize).ToList();
                           break;
                       case "firstName":
                           results = db.Students.OrderByDescending
                   (r => r.FirstMidName).Skip(begin).Take(pageSize).ToList();
                           break;
                   }
                   break; ;
           }

           var students =
               results.Select(
                   r =>
                       new Student
                       {
                           EnrollmentDate = r.EnrollmentDate,
                           FirstMidName = r.FirstMidName,
                           LastName = r.LastName,
                           ID = r.ID
                       }).ToList();

           var studentsContainer = new StudentsContainer
       { Students = students, RecordCount = totalNumberOfRecords };

           return studentsContainer;
       }

Next, modify the student controller to look as follows:

.controller("studentCtrl", ["$scope", "dataService", "localStorageService",
        function ($scope, dataService, localStorageService) {
            $scope.data = dataService.students;

            var sortKeyOrder = {
                key: '',
                order: '',
            };
            
            $scope.totalItems = 0;
            $scope.currentPage = 1;
            $scope.maxSize = 5;
            $scope.recordsPerPage = 5;
            $scope.numberOfPageButtons = 5;
          
            getData($scope, dataService, localStorageService);

            $scope.sort = function (col) {

                sortKeyOrder = localStorageService.get('sortKeyOrder');

                if (sortKeyOrder !== null && sortKeyOrder.key === col) {

                    if (sortKeyOrder.order == 'ASC')
                        sortKeyOrder.order = 'DESC';
                    else
                        sortKeyOrder.order = 'ASC';

                    localStorageService.set('sortKeyOrder', sortKeyOrder);

                } else {
                    
                    sortKeyOrder = {
                        key: col,
                        order: 'ASC',
                    };
                    
                    localStorageService.set('sortKeyOrder', sortKeyOrder);

                }
            };

            $scope.pageChanged = function () {

                getData($scope, dataService, localStorageService);
            };


        }]);

In line 1, localStorageService is being injected as a dependency & then in line 18, a new sort function has been added. Also in line 16, the getData function has an additional localStorageService param.

Modify the getData function to look as follows:

var getData = function ($scope, dataService, localStorageService) {

    var sortKeyOrder = localStorageService.get('sortKeyOrder');

    if (sortKeyOrder == null) {
        sortKeyOrder = {
            key: 'lastName',
            order: 'ASC',
        };
    }
    
    $scope.sortKeyOrder = sortKeyOrder;

    var options = {
        currentPage: $scope.currentPage,
        recordsPerPage: $scope.recordsPerPage,
        sortKeyOrder: sortKeyOrder,
    };


    dataService.getStudents(options)
    .then(function (totalItems) {

        $scope.totalItems = totalItems;
    },
    function () {

        alert("an error occured: unable to get data");
    });

};

Modify the students.tpl.html to look as follows:

<div class="row top-buffer">
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th>
        </th>
        <th>
        </th>
        <th>
        </th>

        <th>
          <a href="#" ng-click="sort('lastName')" 
          target="_self">Last Name</a>
          <i ng-class="{'glyphicon glyphicon-chevron-up':sortKeyOrder.order=='ASC' 
          && sortKeyOrder.key=='lastName'}"></i>
          <i ng-class="{'glyphicon glyphicon-chevron-down':sortKeyOrder.order=='DESC' 
          && sortKeyOrder.key=='lastName'}"></i>

        </th>
        <th>
          <a href="#" ng-click="sort('firstName')" 
          target="_self">First Name</a>
          <i ng-class="{'glyphicon glyphicon-chevron-up':sortKeyOrder.order=='ASC' 
          && sortKeyOrder.key=='firstName'}"></i>
          <i ng-class="{'glyphicon glyphicon-chevron-down':sortKeyOrder.order=='DESC' 
          && sortKeyOrder.key=='firstName'}"></i>
        </th>
        <th>
          Date of Enrollment
        </th>

      </tr>
    </thead>
    <tbody data-ng-repeat="i in data">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <textarea class="form-control" style="width: 300px;height: 65px" 
          ng-model="i.lastName"></textarea>
        </td>
        <td>
          <textarea class="form-control" style="width: 300px;height: 65px" 
          ng-model="i.firstMidName"></textarea>
        </td>
        <td>
          <input type="text" class="form-control" 
          style="width: 150px;height: 65px" ng-model="i.enrollmentDate" />
        </td>
      </tr>

    </tbody>
  </table>

  <span data-pagination data-total-items="totalItems" 
  data-ng-model="currentPage" data-max-size="numberOfPageButtons" 
  class=" pagination-sm" data-boundary-links="true" data-rotate="false" 
  data-ng-change="pageChanged()" data-items-per-page="recordsPerPage"></span>

</div>

In the next post, I’ll implement the ability to search based on first name or last name.

As always, the code is here and you can view the changes I made in this post by looking at this commit.