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.