Thursday 25 February 2016

Angularjs Sort By Hearder Column

 
 
 
 
 HTML
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Style/sorting.css" rel="stylesheet" />
    <script src="Angularjs/angular.min.js"></script>
    <script src="Angularjs/Angularjssorting.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">   
    <br />
    <table border="1" style="font-family:Verdana;" cellpadding="6px" cellspacing="0">
        <thead>
            <tr>
                <th ng-click="sortData('name')" style="cursor:pointer;"> Name<div ng-class="getSortClass('name')"></div> </th>
                <th ng-click="sortData('DateOfBirth')" style="cursor:pointer;">Date Of Birth<div ng-class="getSortClass('DateOfBirth')"></div></th>
                <th ng-click="sortData('Gender')" style="cursor:pointer;">Gender<div ng-class="getSortClass('Gender')"></div></th>
                <th ng-click="sortData('salary')" style="cursor:pointer;">Salary(Number)<div ng-class="getSortClass('salary')"></div></th>
                <th ng-click="sortData('salary')" style="cursor:pointer;">Salary<div ng-class="getSortClass('salary')"></div></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees|orderBy:sortColumn:reverseSort">
                <td>{{employee.name}}</td>
                <td>{{employee.DateOfBirth|date:"dd/MM/yyyy"}}</td>
                <td>{{employee.Gender}}</td>
                <td>{{employee.salary}}</td>
                <td>{{employee.salary}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
js
/// <reference path="angular.min.js" />
var app = angular.module("myApp", [])
                 .controller("myController", function ($scope) {
                     var employees = [
                         { name: "Ranjeet", DateOfBirth: new Date("February 02 1993"), Gender: "Male", salary: "16000.255" },
                         { name: "Munna", DateOfBirth: new Date("March 20 1992"), Gender: "Male", salary: "22000" },
                         { name: "Abhishek", DateOfBirth: new Date("April 01 1992"), Gender: "Male", salary: "20000" },
                         { name: "Pradip", DateOfBirth: new Date("May 01 1992"), Gender: "Male", salary: "21000" },
                         { name: "Akash", DateOfBirth: new Date("July 01 1992"), Gender: "Male", salary: "22000" },
                         { name: "Pradip", DateOfBirth: new Date("August 10 1992"), Gender: "Male", salary: "23000" },
                     ];
                     $scope.employees = employees;
                     $scope.sortColumn = "name";
                     $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 '';
                     }
                 });

CSS
body {
}
.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display:inline-block;
    cursor:
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top:10px solid black;
    display:inline-block;
}

1 comment:

  1. Titanium belly rings, made from titanium alloy - Titsanium-arts
    Titsanium-art is a unique titanium hoop earrings and unique alloy titanium exhaust with ffxiv titanium nugget a few important ford escape titanium features. The original, titanium steel is durable and samsung titanium watch has been around for $11.99

    ReplyDelete