Part 10 AngularJS sort rows by table header
Here is what we want to do
1. The data should be sorted when the table column header is clicked
2.
The user should be able to sort in both the directions - ascending and
descending. Clicking on the column for the first time should sort the
data in ascending order. Clicking on the same column again should sort
in descending order.
3. An icon should be displayed next to the column showing the sort column and direction
Script.js : The controller function in the script does the following
- Sets up the model
- sortColumn and reverseSort properties
are attached to the $scope object. These 2 properties are used to
control the column by which the data should be sorted and the sort
direction. - sortColumn is set to name and reverseSort is
set to false. This will ensure that when the form is initially loaded,
the table data will be sorted by name column in ascending order. - Depending on the column header the user has clicked, sortData() function sets the sortColumn and reverseSort property values.
- Based on the sort column and the sort direction, getSortClass()
function returns the CSS class name to return. The CSS class controls
the sort icon that will be displayed next to the sort column.
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) { var employees = [
{
name: "Ben", dateOfBirth: new Date("November 23, 1980"),
gender: "Male", salary: 55000
},
{
name: "Sara", dateOfBirth: new Date("May 05, 1970"),
gender: "Female", salary: 68000
},
{
name: "Mark", dateOfBirth: new Date("August 15, 1974"),
gender: "Male", salary: 57000
},
{
name: "Pam", dateOfBirth: new Date("October 27, 1979"),
gender: "Female", salary: 53000
},
{
name: "Todd", dateOfBirth: new Date("December 30, 1983"),
gender: "Male", salary: 60000
}
]; $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 '';
}
});
HtmlPage1.html : sortData() function is called when any table header is clicked, passing the name of the column by which the data should be sorted. The div element's, ng-class directive calls getSortClass() function, which returns the CSS class to be applied. The CSS displays the UP or DOWN arrow depending on the sort direction. Finally, with the orderBy filter sortColumn and reverseSort properties of the $scope object are used to control the column by which the data should be sorted and the sort direction.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th ng-click="sortData('name')">
Name <div ng-class="getSortClass('name')"></div>
</th>
<th ng-click="sortData('dateOfBirth')">
Date of Birth <div ng-class="getSortClass('dateOfBirth')"></div>
</th>
<th ng-click="sortData('gender')">
Gender <div ng-class="getSortClass('gender')"></div>
</th>
<th ng-click="sortData('salary')">
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>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Styles.css : CSS styles to make the form look pretty.
body {
font-family: Arial;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
/*cursor property displays hand symbol
when hovered over the th element*/
cursor: pointer;
}
/*This class displays the UP arrow*/
.arrow-up {
width:;
height:;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display:inline-block;
}
/*This class displays the DOWN arrow*/
.arrow-down {
width:;
height:;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
display:inline-block;
}
Part 10 AngularJS sort rows by table header的更多相关文章
- Clone table header and set as the first element, and replace header's th with td
Clone table header and replace header's th with td var tableHeaderRow = '#tableId tbody tr:nth-child ...
- 在SSRS的每一页重复显示table header
现在在做一个关于SSRS报表展示的项目,但是我困顿在如何在table的每一页让table header重复显示.因为我在table属性中勾选了"Report header columns o ...
- Kettle 排序记录的使用（Sort rows）
排序行的步骤根据您指定的字段和它们是否应该按升序或降序排序当行数超过指定的排序大小(默认为100万行)时候,kettle必须使用临时文件排序行.步骤名称:名称在整个转换中应该是唯一的排序目录:默认当前 ...
- Creating HTML table with vertically oriented text as table header 表头文字方向
AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...
- Ubuntu 14.10 下sort,uniq,cut,wc命令详解
sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...
- jQuery复制table header到表格的最下面
为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现: 1 2 3 4 5 var $tfoot = $(''); $($('t ...
- 10.27 sort
排序命令sort选项与参数:-f :忽略大小写的差异,例如 A 与 a 视为编码相同:-b :忽略最前面的空白字符部分:-M :以月份的名字来排序,例如 JAN, DEC 等等的排序方法:-n :使用 ...
- 夺命雷公狗—angularjs—10—angularjs里面的内置函数
我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...
- angularjs 文件下载 并 从response header中获取文件名
最近在做一个下载文件的功能,后台接口给的是二进制流的方式,那么前端要把二进制流下载下来. 这个过程使用$http的get请求,使用Blob接收,倒是没有难度,主要是遇到了,后台的文件名拿不到 的问题. ...
随机推荐
- RFID开发利器 proxmark3
Proxmark3 介绍 Proxmark3是由Jonathan Westhues设计并且开发的开源硬件,其主要用RFID的嗅探.读取以及克隆等的操作.其官方网站为:Jonathan Westhues ...
- 【M10】在构造方法内阻止资源泄漏
1.类中没有指针,如果对象构造过程中出现异常,C++保证已经构造好的那一部分自动销毁.注意:这里不是调用析构方法,而是编译器在你的构造方法中插入了一些代码,保证对已经构造好的对象析构. 2.类中有指针 ...
- asp.net架构基础知识--页面以及全局事件
1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 ...
- 我的javascript学习之路（一）对象之基础
做了2个多月的ajax项目,对js的学习觉得了深入了不少,把自己的一些学习的经验贴出来,希望对初学者有所帮助,也希望大家能指出我的错误之处或者不当之处. javascript 是基于对象的语言,为什么 ...
- Codeforces Round #146 (Div. 1) B. Let's Play Osu! dp
B. Let's Play Osu! 题目连接: http://www.codeforces.com/contest/235/problem/B Description You're playing ...
- Android---3种方式限制EditView输入字数（转载）
方法一:利用TextWatcher editText.addTextChangedListener(new TextWatcher() { private CharSequence temp; pri ...
- 深入理解JavaScript 模块模式
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 模块模式是JavaScript一种常用的编码模式.这是一般的 ...
- 深入了解android平台的jni---注册native函数
注册native函数有两种方法:静态注册和动态注册. 1.静态注册方法 根据函数名找到对应的JNI函数:Java层调用函数时,会从对应的JNI中寻找该函数,如果没有就会报错,如果存在则会建立一个关联联 ...
- 迷你MVVM框架 avalonjs 0.81发布
本版本最大的改进是将视图的操作全鄣变成异步.详情如下: 管道符与短路与相混淆的BUG 重构on绑定,省得每次都重复绑定同一个事件回调.虽然addEventListener或attachEvent会忽略 ...
- [STAThread]的含义
Posted on 2007-07-07 10:06 桦林 阅读(33100) 评论(10) 编辑 收藏 [STAThread]STAThread:Single Thread Apar ...