On Click table header data should come in Assending / Descending format

JavaScript
, ,
1

Hi All,

I am trying a table with “AngularJs” and need that on click Table header data should come in asscending/descebding format.

I have written below code but not getting any data in my table.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="js/angular-1.2.20angular.min.js"> </script>

  <style>
	.arrowDown{
		width:0;
		height:0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid #ddd;
		display:inline-block;
	}
	.arrowUp{
		width:0;
		height:0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 10px solid #ddd;
		display:inline-block;
	}
	
	table th
    {
	  cursor: pointer;	
    }
	
   
  </style>
</head>

<body>
	<div data-ng-app="mainModule">
		<h3>1. Simple substring filter</h3> <br />
		<div class="table-rasponsive" data-ng-controller="mainController">
			<table class="table table-bordered table-hover table-striped tablesorter">
				<thead>
					<tr>
						<th data-ng-click="sortData('firstName')">
							First Name <div ng-class="getsortClass('firstName')">
						</th>
						<th data-ng-click="sortData('lastName')">
							Last Name <div ng-class="getsortClass('lastName')">
						</th>
						<th data-ng-click="sortData('Age')">
							Last Name <div ng-class="getsortClass('Age')">
						</th>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="person in people | orderBy:sortColumn:reverseSort">
						<td> {{person.firstName}}</td>
						<td> {{person.lastName}}</td>
						<td> {{person.Age}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<script>
		var app = angular.module('mainModule', []);
		app.controller('mainController', function($scope, $filter){
			$scope.people =[
				{firstName:"Rajesh", lastName:"Singh", Age:32},
				{firstName:"Nirmala", lastName:"Gupta", Age:28},
				{firstName:"Dilip", lastName:"Sawant", Age:31},
				{firstName:"Sanjay", lastName:"Dubey", Age:38}
			];
			
			$scope.people = people;	
			$scope.sortColumn = firstName;
			$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 ? 'arrowDown' : 'arrowUp';
					}
					
					return '';
				}
				 	
		})
	</script>
</body>
</html>
2

Look in the browser console. You have an error that will point you to what is wrong.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.