Part ten AngularJS sort rows by table header

Last Update:2016-02-01 Source: Internet

Author: User

Tags sorted by name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Here's what we want
1. The data should be sorted when the table column header is clicked
2. The user should is 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 is 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 is attached to the $scope object. These 2 properties is used to control the column by which the data should be sorted and the sort direction.
SortColumn is set to name and Reversesort are set to false. This would ensure if the form is initially loaded, the table data would be a sorted by name column in ascending order.
Depending on the column header the user have clicked, sortData() function sets the SortColumn and Reversesort prop Erty 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, which is displayed next to the Sort column.

 varApp =angular. Module ("MyModule", []). Controller ("Mycontroller",function($scope) {varEmployees =[{name:"Ben", dateOfBirth:NewDate ("November 23, 1980"), Gender:"Male", salary:55000}, {name:"Sara", dateOfBirth:NewDate ("May 05, 1970"), Gender:"Female", salary:68000}, {name:"Mark", dateOfBirth:NewDate ("August 15, 1974"), Gender:"Male", salary:57000}, {name:"Pam", dateOfBirth:NewDate ("October 27, 1979"), Gender:"Female", salary:53000}, {name:"Todd", dateOfBirth:NewDate ("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 if any table header was 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 is applied. The CSS displays the "Up" or "down arrow depending" on the sort direction. Finally, with the-the-SortColumn and Reversesort properties of the $scope object is used to control the column By which the data should is sorted and the sort direction.

 <!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head>    <title></title>    <Scriptsrc= "Scripts/angular.min.js"></Script>    <Scriptsrc= "Scripts/script.js"></Script>    <Linkhref= "Styles.css"rel= "stylesheet" /></Head><BodyNg-app= "MyModule">    <DivNg-controller= "Mycontroller">        <Table>            <thead>                <TR>                    <thNg-click= "SortData (' name ')">Name<DivNg-class= "Getsortclass (' name ')"></Div>                    </th>                    <thNg-click= "SortData (' dateOfBirth ')">Date of Birth<DivNg-class= "Getsortclass (' dateOfBirth ')"></Div>                    </th>                    <thNg-click= "SortData (' gender ')">Gender<DivNg-class= "Getsortclass (' gender ')"></Div>                    </th>                    <thNg-click= "SortData (' salary ')">Salary<DivNg-class= "Getsortclass (' salary ')"></Div>                    </th>                </TR>            </thead>            <tbody>                <TRng-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:0;Height:0;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:0;Height:0;Border-left:5px Solid Transparent;Border-right:5px Solid Transparent;Border-top:10px solid Black;Display:Inline-block;}

Part ten AngularJS sort rows by table header

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More