Skip to content
Permalink
Browse files

added ability to sort

  • Loading branch information...
SangeetAgarwal committed Feb 26, 2015
1 parent 3e0d553 commit b01d550cb902ba24dc969c590d747f9545a2019c
@@ -20,7 +20,7 @@ public static void RegisterBundles(BundleCollection bundles)
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
@@ -31,8 +31,9 @@ public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-ui/ui-bootstrap.js",
"~/Scripts/angular-ui/ui-bootstrap-tpls.js",
"~/Scripts/angular-local-storage.js",
"~/Scripts/angular-local-storage.min.js",
"~/Scripts/angular-animate.js",
"~/Scripts/loading-bar.js",
"~/app/app.js",
@@ -19,15 +19,42 @@ public class StudentsApiController : ApiController
private readonly SchoolContext db = new SchoolContext();

// GET: api/Students
public StudentsContainer GetStudents()
public StudentsContainer GetStudents(int currentPage, int recordsPerPage, string sortKey, string sortOrder)
{
var queryStringParams = Request.RequestUri.ParseQueryString();
var pageNumber = Convert.ToInt32(queryStringParams["currentPage"]);
var pageSize = Convert.ToInt32(queryStringParams["recordsPerPage"]);

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

var totalNumberOfRecords = db.Students.Count();
var results = db.Students.OrderBy(r => r.ID).Skip(begin).Take(pageSize).ToList();
List<Student> 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(
@@ -201,6 +201,7 @@
<Content Include="Scripts\angular-loader.js" />
<Content Include="Scripts\angular-loader.min.js" />
<Content Include="Scripts\angular-local-storage.js" />
<Content Include="Scripts\angular-local-storage.min.js" />
<Content Include="Scripts\angular-messages.js" />
<Content Include="Scripts\angular-messages.min.js" />
<Content Include="Scripts\angular-mocks.js" />
@@ -1,3 +1,30 @@
/**
* An Angular module that gives you access to the browsers local storage
* @version v0.1.5 - 2014-11-04
* @link https://github.com/grevory/angular-local-storage
* @author grevory <greg@gregpike.ca>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
(function ( window, angular, undefined ) {
/*jshint globalstrict:true*/
'use strict';

var isDefined = angular.isDefined,
isUndefined = angular.isUndefined,
isNumber = angular.isNumber,
isObject = angular.isObject,
isArray = angular.isArray,
extend = angular.extend,
toJson = angular.toJson,
fromJson = angular.fromJson;


// Test if string is only contains numbers
// e.g '1' => true, "'1'" => true
function isStringNumber(num) {
return /^-?\d+\.?\d*$/.test(num.replace(/["']/g, ''));
}

var angularLocalStorage = angular.module('LocalStorageModule', []);

angularLocalStorage.provider('localStorageService', function() {
@@ -30,11 +57,13 @@ angularLocalStorage.provider('localStorageService', function() {
// Setter for the prefix
this.setPrefix = function(prefix) {
this.prefix = prefix;
return this;
};

// Setter for the storageType
this.setStorageType = function(storageType) {
this.storageType = storageType;
this.storageType = storageType;
return this;
};

// Setter for cookie config
@@ -43,11 +72,13 @@ angularLocalStorage.provider('localStorageService', function() {
expiry: exp,
path: path
};
return this;
};

// Setter for cookie domain
this.setStorageCookieDomain = function(domain) {
this.cookie.domain = domain;
return this;
};

// Setter for notification config
@@ -57,6 +88,7 @@ angularLocalStorage.provider('localStorageService', function() {
setItem: itemSet,
removeItem: itemRemove
};
return this;
};

this.$get = ['$rootScope', '$window', '$document', '$parse', function($rootScope, $window, $document, $parse) {
@@ -259,16 +291,16 @@ angularLocalStorage.provider('localStorageService', function() {
};

// Checks the browser to see if cookies are supported
var browserSupportsCookies = function() {
var browserSupportsCookies = (function() {
try {
return navigator.cookieEnabled ||
return $window.navigator.cookieEnabled ||
("cookie" in $document && ($document.cookie.length > 0 ||
($document.cookie = "test").indexOf.call($document.cookie, "test") > -1));
} catch (e) {
$rootScope.$broadcast('LocalStorageModule.notification.error', e.message);
return false;
}
};
}());

// Directly adds a value to cookies
// Typically used as a fallback is local storage is not available in the browser
@@ -281,7 +313,7 @@ angularLocalStorage.provider('localStorageService', function() {
value = toJson(value);
}

if (!browserSupportsCookies()) {
if (!browserSupportsCookies) {
$rootScope.$broadcast('LocalStorageModule.notification.error', 'COOKIES_NOT_SUPPORTED');
return false;
}
@@ -317,7 +349,7 @@ angularLocalStorage.provider('localStorageService', function() {
// Directly get a value from a cookie
// Example use: localStorageService.cookie.get('library'); // returns 'angular'
var getFromCookies = function (key) {
if (!browserSupportsCookies()) {
if (!browserSupportsCookies) {
$rootScope.$broadcast('LocalStorageModule.notification.error', 'COOKIES_NOT_SUPPORTED');
return false;
}
@@ -410,6 +442,7 @@ angularLocalStorage.provider('localStorageService', function() {
deriveKey: deriveQualifiedKey,
length: lengthOfLocalStorage,
cookie: {
isSupported: browserSupportsCookies,
set: addToCookies,
add: addToCookies, //DEPRECATED
get: getFromCookies,
@@ -419,3 +452,4 @@ angularLocalStorage.provider('localStorageService', function() {
};
}];
});
})( window, window.angular );

Some generated files are not rendered by default. Learn more.

@@ -1,45 +1,44 @@
<!DOCTYPE html>
<html data-ng-app="ngWebApiGrid">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/app")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/app")
@RenderSection("scripts", required: false)
</body>
</html>
@@ -15,7 +15,9 @@

var _getStudents = function (options) {

$http.get("api/StudentsApi?currentPage=" + options.currentPage + "&" + "recordsPerPage=" + options.recordsPerPage)
$http.get("api/StudentsApi?currentPage=" + options.currentPage + "&" +
"recordsPerPage=" + options.recordsPerPage + "&" +
"sortKey=" + options.sortKeyOrder.key + "&" + "sortOrder=" + options.sortKeyOrder.order)
.then(function (result) {
angular.copy(result.data.students, _students);
deferred.resolve(result.data.recordCount);
@@ -32,32 +34,78 @@
getStudents: _getStudents,
};
}])
.controller("studentCtrl", ["$scope", "dataService",
function ($scope, dataService) {
.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);

getData($scope, dataService);
} else {

sortKeyOrder = {
key: col,
order: 'ASC',
};

localStorageService.set('sortKeyOrder', sortKeyOrder);

}
};

$scope.pageChanged = function () {

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


}]);


var getData = function ($scope, dataService) {
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,
};


@@ -8,11 +8,17 @@
</th>
<th>
</th>

<th>
Last Name
<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>
First Name
<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

0 comments on commit b01d550

Please sign in to comment.
You can’t perform that action at this time.