Implement Table Sorting on Header click using AngularJS in ASP.Net

Last Reply 8 months ago By dharmendr

Posted 8 months ago

How to implement table sorting using header click in angularjs.

Posted 8 months ago Modified on 8 months ago

Hi rani,

Check this example. Now please take its reference and correct your code.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller("MyController", function ($scope, $http, $window) {
            $"Default.aspx/GetEmployees", { headers: { 'Content-Type': 'application/json'} })
                .then(function (response) {
                    $scope.Employees = eval(;
                    // Default SortColumn.
                    $scope.SortColumn = "EmployeeId";
                    $scope.ReverseSort = false;

                    $scope.SortData = function (column) {
                        $scope.ReverseSort = ($scope.SortColumn == column) ? !$scope.ReverseSort : false;
                        $scope.SortColumn = column;

                    $scope.GetSortClass = function (column) {
                        if ($scope.SortColumn == column) {
                            return $scope.ReverseSort ? 'arrow-down' : 'arrow-up';
                        return '';
                }, function error(response) { alert(response.responseText); });
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-table-responsive">
                    <th ng-click="SortData('EmployeeId')" style="width: 30px">
                        Id&nbsp;<div ng-class="GetSortClass('EmployeeId')">
                    <th ng-click="SortData('FirstName')" style="width: 100px">
                        First Name&nbsp;<div ng-class="GetSortClass('FirstName')">
                    <th ng-click="SortData('LastName')" style="width: 100px">
                        Last Name&nbsp;<div ng-class="GetSortClass('LastName')">
                    <th ng-click="SortData('City')" style="width: 100px">
                        City&nbsp;<div ng-class="GetSortClass('City')">
                    <th ng-click="SortData('Country')" style="width: 70px">
                        Country&nbsp;<div ng-class="GetSortClass('Country')">
                <tr ng-repeat="employee in Employees | orderBy:SortColumn:ReverseSort">
                    <td>{{ employee.EmployeeId }}</td>
                    <td>{{ employee.FirstName }}</td>
                    <td>{{ employee.LastName }}</td>
                    <td>{{ employee.City }}</td>
                    <td>{{ employee.Country }}</td>


<style type="text/css">        
    /*Displays UP arrow*/
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid red;
        display: inline-block;
    /*Displays DOWN arrow*/
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid red;
        display: inline-block;



using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;


Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services



public static string GetEmployees()
    List<object> employees = new List<object>();
    string sql = "SELECT * FROM Employees";
    using (SqlConnection conn = new SqlConnection())
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
            cmd.Connection = conn;
            using (SqlDataReader sdr = cmd.ExecuteReader())
                while (sdr.Read())
                        EmployeeId = sdr["EmployeeID"],
                        FirstName = sdr["FirstName"],
                        LastName = sdr["LastName"],
                        City = sdr["City"],
                        Country = sdr["Country"]
    return (new JavaScriptSerializer().Serialize(employees));


Public Shared Function GetEmployees() As String
    Dim employees As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT * FROM Employees"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)            
            cmd.Connection = conn
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    employees.Add(New With {
                        .EmployeeId = sdr("EmployeeID"),
                        .FirstName = sdr("FirstName"),
                        .LastName = sdr("LastName"),
                        .City = sdr("City"),
                        .Country = sdr("Country")
                End While
            End Using
        End Using
    End Using
    Return (New JavaScriptSerializer().Serialize(employees))
End Function