AngularJS sorting rows by table header

Question

I have four table headers    scope headers     Header1    Header2    Header3    Header4      And I want to be able to sort my table by clicking on the header   So if my table looks like this  H1   H2   H3   H4 A    H    D   etc     B    G    C C    F    B D    E    A   and I click on  H2   my table now looks like this   H1   H2   H3   H4 D    E    A   etc     C    F    B B    G    C A    H    D   That is  the content of each column never changes  but by clicking on the header I want to order the columns by  the rows will reorder themselves   The content of my table is created by a database call done with Mojolicious and is returned to the browser with   scope results   angular fromJson data      This works for me so far   The rest of the code I have cobbled together looks something like this    lt table class   table table-striped table-hover  gt       lt th ng-repeat   header in headers  gt           lt a gt    headers  index     lt  a gt       lt  th gt       lt tr ng-repeat  result in results  gt           lt td gt    results h1    lt  td gt           lt td gt    results h2    lt  td gt           lt td gt    results h3    lt  td gt           lt td gt    results h4    lt  td gt       lt  tr gt   lt  table gt    How do I order the columns from this point  just by clicking on the header at the top of the table

User · Answer

I m just getting my feet wet with angular  but I found this great tutorial  Here s a working plunk I put together with credit to Scott Allen and the above tutorial   Click search to display the sortable table   For each column header you need to make it clickable - ng-click on a link will work   This will set the sortName of the column to sort    lt th gt        lt a href     ng-click  sortName  name   sortReverse    sortReverse  gt             lt span ng-show  sortName     name   amp  amp  sortReverse  class  glyphicon glyphicon-triangle-bottom  gt  lt  span gt             lt span ng-show  sortName     name   amp  amp   sortReverse  class  glyphicon glyphicon-triangle-top  gt  lt  span gt             Name       lt  a gt   lt  th gt    Then  in the table body you can pipe in that sortName in the orderBy filter orderBy sortName sortReverse   lt tr ng-repeat  repo in repos   orderBy sortName sortReverse   filter searchRepos  gt        lt td gt   repo name   lt  td gt        lt td class  tag tag-primary  gt   repo stargazers count   number   lt  td gt        lt td gt   repo language   lt  td gt   lt  tr gt

User · Answer

Another way to do this in AngularJS is to use a Grid   The advantage with grids is that the row sorting behavior you are looking for is included by default   The functionality is well encapsulated  You don t need to add ng-click attributes  or use scope variables to maintain state        lt body ng-controller  MyCtrl  gt           lt div class  gridStyle  ng-grid  gridOptions  gt  lt  div gt       lt  body gt    You just add the grid options to your controller      scope gridOptions         data   myData employees       columnDefs           field   firstName         displayName   First Name                 field   lastName         displayName   Last Name                 field   age         displayName   Age                Full working snippet attached    x000D   x000D  var app   angular module  myApp     ngGrid    ngAnimate     x000D  app controller  MyCtrl   function  scope    x000D   x000D     scope myData     x000D      employees     x000D        firstName   John   x000D        lastName   Doe   x000D        age  30 x000D           x000D        firstName   Frank   x000D        lastName   Burns   x000D        age  54 x000D           x000D        firstName   Sue   x000D        lastName   Banter   x000D        age  21 x000D         x000D       x000D   x000D     scope gridOptions     x000D      data   myData employees   x000D      columnDefs     x000D        field   firstName   x000D        displayName   First Name  x000D           x000D        field   lastName   x000D        displayName   Last Name  x000D           x000D        field   age   x000D        displayName   Age  x000D         x000D       x000D      x000D    style css   x000D   gridStyle   x000D      border  1px solid rgb 212 212 212   x000D      width  400px  x000D      height  200px x000D    x000D   lt  DOCTYPE html gt  x000D   lt html ng-app  myApp  gt  x000D       lt head lang  en  gt  x000D           lt meta charset  utf-8  gt  x000D           lt title gt Custom Plunker lt  title gt  x000D           lt link rel  stylesheet  type  text css  href  http   angular-ui github com ng-grid css ng-grid css    gt  x000D           lt link rel  stylesheet  type  text css  href  style css    gt  x000D           lt script src  https   ajax googleapis com ajax libs jquery 2 0 3 jquery min js  gt  lt  script gt  x000D           lt script src  https   ajax googleapis com ajax libs angularjs 1 2 3 angular js  gt  lt  script gt  x000D           lt script src  https   ajax googleapis com ajax libs angularjs 1 2 3 angular-animate js  gt  lt  script gt  x000D           lt script type  text javascript  src  http   angular-ui github com ng-grid lib ng-grid debug js  gt  lt  script gt  x000D           lt script type  text javascript  src  main js  gt  lt  script gt  x000D       lt  head gt  x000D       lt body ng-controller  MyCtrl  gt  x000D           lt div class  gridStyle  ng-grid  gridOptions  gt  lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use this code without arrows     i e by clicking on header it automatically shows ascending and descending order of elements       lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt       lt script src  scripts angular min js  gt  lt  script gt       lt script src  Scripts Script js  gt  lt  script gt       lt style gt          table               border-collapse  collapse              font-family  Arial                     td               border  1px solid black              padding  5px                     th               border  1px solid black              padding  5px              text-align  left                 lt  style gt   lt  head gt   lt body ng-app  myModule  gt       lt div ng-controller  myController  gt            lt br   gt  lt br   gt           lt table gt               lt thead gt                   lt tr gt                       lt th gt                           lt a href     ng-click  orderByField  name   reverseSort    reverseSort  gt                              Name                          lt  a gt                       lt  th gt                       lt th gt                           lt a href     ng-click  orderByField  dateOfBirth   reverseSort    reverseSort  gt                              Date Of Birth                          lt  a gt                       lt  th gt                       lt th gt                           lt a href     ng-click  orderByField  gender   reverseSort    reverseSort  gt                             Gender                          lt  a gt                       lt  th gt                       lt th gt                           lt a href     ng-click  orderByField  salary   reverseSort    reverseSort  gt                              Salary                          lt  a gt                       lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr ng-repeat  employee in employees   orderBy orderByField reverseSort  gt                       lt td gt                             employee name                         lt  td gt                       lt td gt                             employee dateOfBirth   date  dd MM yyyy                          lt  td gt                       lt td gt                             employee gender                         lt  td gt                       lt td gt                             employee salary                          lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt       lt script gt          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 orderByField    name                scope reverseSort   false                    lt  script gt   lt  body gt   lt  html gt

User · Answer

I think this working CodePen example that I created will show you exactly how to do what you want   The template    lt section ng-app  app  ng-controller  MainCtrl  gt     lt span class  label  gt Ordered By    orderByField    Reverse Sort    reverseSort   lt  span gt  lt br gt  lt br gt     lt table class  table table-bordered  gt       lt thead gt         lt tr gt           lt th gt             lt a href     ng-click  orderByField  firstName   reverseSort    reverseSort  gt            First Name  lt span ng-show  orderByField     firstName   gt  lt span ng-show   reverseSort  gt   lt  span gt  lt span ng-show  reverseSort  gt v lt  span gt  lt  span gt             lt  a gt           lt  th gt           lt th gt             lt a href     ng-click  orderByField  lastName   reverseSort    reverseSort  gt              Last Name  lt span ng-show  orderByField     lastName   gt  lt span ng-show   reverseSort  gt   lt  span gt  lt span ng-show  reverseSort  gt v lt  span gt  lt  span gt             lt  a gt           lt  th gt           lt th gt             lt a href     ng-click  orderByField  age   reverseSort    reverseSort  gt            Age  lt span ng-show  orderByField     age   gt  lt span ng-show   reverseSort  gt   lt  span gt  lt span ng-show  reverseSort  gt v lt  span gt  lt  span gt             lt  a gt           lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr ng-repeat  emp in data employees orderBy orderByField reverseSort  gt           lt td gt   emp firstName   lt  td gt           lt td gt   emp lastName   lt  td gt           lt td gt   emp age   lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  section gt    The JavaScript code   var app   angular module  app         app controller  MainCtrl   function  scope       scope orderByField    firstName      scope reverseSort   false      scope data         employees           firstName   John         lastName   Doe         age  30               firstName   Frank         lastName   Burns         age  54               firstName   Sue         lastName   Banter         age  21

User · Answer

Here is an example that sorts by the header  This table is dynamic and changes with the JSON size   I was able to build a dynamic table off of some other people s examples and documentation  http   jsfiddle net lastlink v7pszemn 1    lt tr gt       lt th class    header    ng-repeat   header  value  in items 0   ng-click  changeSorting header   gt        header      lt i ng-class  selectedCls2 header   gt  lt  i gt   lt  tr gt    lt tbody gt       lt tr ng-repeat  row in pagedItems currentPage    orderBy sort sortingOrder sort reverse  gt           lt td ng-repeat  cell in row  gt                  cell           lt  td gt       lt  tr gt    Although the columns are out of order  on my  NET project they are in order

User · Answer

Use a third-party JavaScript library  It will give you that and much more  A good example is datatables  if you are also using jQuery   https   datatables net  Or just order your bound array in  scope results when the header is clicked

User · Answer

Try this   First change your controller      yourModuleName controller  yourControllerName   function   scope            var list                   H1  A   H2  B   H3  C   H4  d                   H1  E   H2  B   H3  F   H4  G                   H1  C   H2  H   H3  L   H4  M                   H1  I   H2  B   H3  E   H4  A                         scope list   list            scope headers     Header1    Header2    Header3    Header4              scope sortColumn    Header1             scope reverseSort   false            scope sortData   function  columnIndex                 scope reverseSort     scope sortColumn     scope headers columnIndex       scope reverseSort   false                scope sortColumn    scope headers columnIndex                        then change code in html side like this       lt th ng-repeat   header in headers  gt               lt a ng-click  sortData  index   gt    headers  index     lt  a gt       lt  th gt       lt tr ng-repeat  result in results   orderBy   sortColumn   reverseSort  gt           lt td gt    results h1    lt  td gt           lt td gt    results h2    lt  td gt           lt td gt    results h3    lt  td gt           lt td gt    results h4    lt  td gt       lt  tr gt

User · Answer

Here is a fiddle that can help you to do this with AngularJS http   jsfiddle net patxy D2FsZ    lt th ng repeat   i th  in head  ng class  selectedCls i   ng click  changeSorting i   gt         th    lt  th gt    Then something like this for your data    lt tr ng repeat  row in body  orderBy sort column  sort descending   gt       lt td gt   row a   lt  td gt       lt td gt   row b   lt  td gt       lt td gt   row c   lt  td gt   lt  tr gt    With such functions in your AngularJS controller   scope sort         column   b       descending  false     scope selectedCls   function column        return column    scope sort column  amp  amp   sort-    scope sort descending      scope changeSorting   function column        var sort   scope sort      if  sort column    column            sort descending    sort descending        else           sort column   column          sort descending   false

User · Answer

I had found the easiest way to solve this question  If efficient you can use  HTML code  import angular min js  and the angular route js library   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt meta charset  UTF-8  gt   lt title gt like dislike lt  title gt   lt  head gt   lt body ng-app  myapp  ng-controller  likedislikecntrl  bgcolor   9acd32  gt   lt script src    modules angular min js  gt  lt  script gt   lt script src    modules angular-route js  gt  lt  script gt   lt script src    likedislikecntrl js  gt  lt  script gt   lt  select gt  lt  h1 gt  lt  p gt   lt table border  5  align  center  gt   lt thead gt   lt th gt professorname  lt select ng-model  sort1  style  background-color   chartreuse  gt   lt option value   name   gt asc lt  option gt   lt option value  -name   gt desc lt  option gt   lt  select gt  lt  th gt   lt th  gt Subject  lt select ng-model  sort1  gt   lt option value   subject   gt asc lt  option gt   lt option value  -subject   gt desc lt  option gt  lt  select gt  lt  th gt   lt th  gt Gender  lt select ng-model  sort1  gt   lt option value   gender  gt asc lt  option gt   lt option value  -gender  gt desc lt  option gt  lt  select gt  lt  th gt   lt th  gt Likes  lt select ng-model  sort1  gt   lt option value   likes   gt asc lt  option gt   lt option value  -likes   gt desc lt  option gt  lt  select gt  lt  th gt   lt th  gt Dislikes  lt select ng-model  sort1  gt   lt option value   dislikes   gt asc lt  option gt   lt option value  -dislikes  gt desc lt  option gt  lt  select gt  lt  th gt   lt th rowspan  2  gt Like Dislike lt  th gt   lt  thead gt   lt tbody gt   lt tr ng-repeat  sir in sirs   orderBy sort1 orderBy sort limitTo row   gt   lt td  gt   sir name   lt  td gt   lt td gt   sir subject uppercase   lt  td gt   lt td gt   sir gender lowercase   lt  td gt   lt td gt   sir likes   lt  td gt   lt td gt   sir dislikes   lt  td gt   lt td gt  lt button ng-click  ldfi1 sir   style  background-color chartreuse    gt Like lt  button gt  lt  td gt   lt td gt  lt button ng-click  ldfd1 sir   style  background- color chartreuse  gt Dislike lt  button gt  lt  td gt   lt  tr gt   lt  tbody gt   lt  table gt   lt  body gt    lt  html gt  JavaScript Code  likedislikecntrl js  var app angular module  myapp    ngRoute      app controller  likedislikecntrl  function   scope    var sirs        name  Srinivas  subject  dmdw  gender  male  likes 0 dislikes 0        name  Sharif  subject  dms  gender  male  likes 0 dislikes 0        name  Chaitanya  subject  daa  gender  male  likes 0 dislikes 0        name  Pranav  subject  wt  gender  male  likes 0 dislikes 0        name  Anil Chowdary  subject  ds  gender  male  likes 0 dislikes 0        name  Rajesh  subject  mp  gender  male  likes 0 dislikes 0        name  Deepak  subject  dld  gender  male  likes 0 dislikes 0        name  JP  subject  mp  gender  male  likes 0 dislikes 0        name  NagaDeepthi  subject  oose  gender  female  likes 0 dislikes 0        name  Swathi  subject  ca  gender  female  likes 0 dislikes 0        name  Madavilatha  subject  cn  gender  female  likes 0 dislikes 0        scope sirs sirs   scope ldfi1 function  sir        sir likes       scope ldfd1 function  sir       sir dislikes       scope row 8

[angularjs] AngularJS sorting rows by table header

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to html-table