Sorting table rows according to table header column using javascript or jquery

Question

I have something like this  lt table gt       lt thead gt           lt tr gt               lt th gt S L  lt  th gt               lt th gt name lt  th gt           lt  tr gt       lt  thead gt        lt tbody gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Ronaldo lt  td gt           lt  tr gt           lt tr gt               lt td gt 2 lt  td gt               lt td gt Messi lt  td gt           lt  tr gt           lt tr gt               lt td gt 3 lt  td gt               lt td gt Ribery lt  td gt           lt  tr gt           lt tr gt               lt td gt 4 lt  td gt               lt td gt Bale lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   What i want is to sort the  lt tr gt  of  lt tbody gt  when clicked th in ascending and descending order alternatively in according to the following th clicked   so if some one clicks the S L th then it shows the table rows in descending and then ascending order alternatively at every click  When clicked Name th it should show the names in descending order and then ascending order without change in their respective S L  here is fiddle

User · Answer

I think this might help you  Here is the JSFiddle demo   And here is the code    x000D   x000D  var stIsIE      cc on     false  x000D  sorttable     x000D    init  function     x000D      if  arguments callee done  return  x000D      arguments callee done   true  x000D      if   timer  clearInterval  timer   x000D      if   document createElement     document getElementsByTagName  return  x000D      sorttable DATE RE       d d       -   d d       -    d d   d d     x000D      forEach document getElementsByTagName  table    function table    x000D        if  table className search   bsortable b      -1    x000D          sorttable makeSortable table   x000D          x000D          x000D       x000D    makeSortable  function table    x000D      if  table getElementsByTagName  thead   length    0    x000D        the   document createElement  thead    x000D        the appendChild table rows 0    x000D        table insertBefore the  table firstChild   x000D        x000D      if  table tHead    null  table tHead   table getElementsByTagName  thead   0   x000D      if  table tHead rows length    1  return  x000D      sortbottomrows       x000D      for  var i   0  i  lt  table rows length  i      x000D        if  table rows i  className search   bsortbottom b      -1    x000D          sortbottomrows sortbottomrows length    table rows i   x000D          x000D        x000D      if  sortbottomrows    x000D        if  table tFoot    null    x000D          tfo   document createElement  tfoot    x000D          table appendChild tfo   x000D          x000D        for  var i   0  i  lt  sortbottomrows length  i      x000D          tfo appendChild sortbottomrows i    x000D          x000D        delete sortbottomrows  x000D        x000D      headrow   table tHead rows 0  cells  x000D      for  var i   0  i  lt  headrow length  i      x000D        if   headrow i  className match   bsorttable nosort b      x000D          mtch   headrow i  className match   bsorttable   a-z0-9    b    x000D          if  mtch    x000D            override   mtch 1   x000D            x000D          if  mtch  amp  amp  typeof sorttable  sort     override      function     x000D            headrow i  sorttable sortfunction   sorttable  sort     override   x000D            else   x000D            headrow i  sorttable sortfunction   sorttable guessType table  i   x000D            x000D          headrow i  sorttable columnindex   i  x000D          headrow i  sorttable tbody   table tBodies 0   x000D          dean addEvent headrow i    click   sorttable innerSortFunction   function e    x000D   x000D            if  this className search   bsorttable sorted b      -1    x000D              sorttable reverse this sorttable tbody   x000D              this className   this className replace  sorttable sorted   x000D                 sorttable sorted reverse    x000D              this removeChild document getElementById  sorttable sortfwdind     x000D              sortrevind   document createElement  span    x000D              sortrevind id    sorttable sortrevind   x000D              sortrevind innerHTML   stIsIE     amp nbsp lt font face  webdings  gt 5 lt  font gt       amp nbsp  amp  x25B4    x000D              this appendChild sortrevind   x000D              return  x000D              x000D            if  this className search   bsorttable sorted reverse b      -1    x000D              sorttable reverse this sorttable tbody   x000D              this className   this className replace  sorttable sorted reverse   x000D                 sorttable sorted    x000D              this removeChild document getElementById  sorttable sortrevind     x000D              sortfwdind   document createElement  span    x000D              sortfwdind id    sorttable sortfwdind   x000D              sortfwdind innerHTML   stIsIE     amp nbsp lt font face  webdings  gt 6 lt  font gt       amp nbsp  amp  x25BE    x000D              this appendChild sortfwdind   x000D              return  x000D              x000D            theadrow   this parentNode  x000D            forEach theadrow childNodes  function cell    x000D              if  cell nodeType    1    x000D                cell className   cell className replace  sorttable sorted reverse        x000D                cell className   cell className replace  sorttable sorted        x000D                x000D                x000D            sortfwdind   document getElementById  sorttable sortfwdind    x000D            if  sortfwdind    x000D              sortfwdind parentNode removeChild sortfwdind   x000D              x000D            sortrevind   document getElementById  sorttable sortrevind    x000D            if  sortrevind    x000D              sortrevind parentNode removeChild sortrevind   x000D              x000D   x000D            this className      sorttable sorted   x000D            sortfwdind   document createElement  span    x000D            sortfwdind id    sorttable sortfwdind   x000D            sortfwdind innerHTML   stIsIE     amp nbsp lt font face  webdings  gt 6 lt  font gt       amp nbsp  amp  x25BE    x000D            this appendChild sortfwdind   x000D            row array       x000D            col   this sorttable columnindex  x000D            rows   this sorttable tbody rows  x000D            for  var j   0  j  lt  rows length  j      x000D              row array row array length     sorttable getInnerText rows j  cells col    rows j    x000D              x000D            row array sort this sorttable sortfunction   x000D            tb   this sorttable tbody  x000D            for  var j   0  j  lt  row array length  j      x000D              tb appendChild row array j  1    x000D              x000D            delete row array  x000D              x000D          x000D        x000D       x000D   x000D    guessType  function table  column    x000D      sortfn   sorttable sort alpha  x000D      for  var i   0  i  lt  table tBodies 0  rows length  i      x000D        text   sorttable getInnerText table tBodies 0  rows i  cells column    x000D        if  text          x000D          if  text match   -           d             x000D            return sorttable sort numeric  x000D            x000D          possdate   text match sorttable DATE RE  x000D          if  possdate    x000D            first   parseInt possdate 1    x000D            second   parseInt possdate 2    x000D            if  first  gt  12    x000D              return sorttable sort ddmm  x000D              else if  second  gt  12    x000D              return sorttable sort mmdd  x000D              else   x000D              sortfn   sorttable sort ddmm  x000D              x000D            x000D          x000D        x000D      return sortfn  x000D       x000D    getInnerText  function node    x000D      if   node  return     x000D      hasInputs    typeof node getElementsByTagName     function    amp  amp  x000D        node getElementsByTagName  input   length  x000D      if  node getAttribute  sorttable customkey      null    x000D        return node getAttribute  sorttable customkey    x000D        else if  typeof node textContent     undefined   amp  amp   hasInputs    x000D        return node textContent replace    s   s   g       x000D        else if  typeof node innerText     undefined   amp  amp   hasInputs    x000D        return node innerText replace    s   s   g       x000D        else if  typeof node text     undefined   amp  amp   hasInputs    x000D        return node text replace    s   s   g       x000D        else   x000D        switch  node nodeType    x000D          case 3  x000D            if  node nodeName toLowerCase       input     x000D              return node value replace    s   s   g       x000D              x000D          case 4  x000D            return node nodeValue replace    s   s   g       x000D            break  x000D          case 1  x000D          case 11  x000D            var innerText       x000D            for  var i   0  i  lt  node childNodes length  i      x000D              innerText    sorttable getInnerText node childNodes i    x000D              x000D            return innerText replace    s   s   g       x000D            break  x000D          default  x000D            return     x000D          x000D        x000D       x000D    reverse  function tbody    x000D         reverse the rows in a tbody x000D      newrows       x000D      for  var i   0  i  lt  tbody rows length  i      x000D        newrows newrows length    tbody rows i   x000D        x000D      for  var i   newrows length - 1  i  gt   0  i--    x000D        tbody appendChild newrows i    x000D        x000D      delete newrows  x000D       x000D    sort numeric  function a  b    x000D      aa   parseFloat a 0  replace    0-9 -  g        x000D      if  isNaN aa   aa   0  x000D      bb   parseFloat b 0  replace    0-9 -  g        x000D      if  isNaN bb   bb   0  x000D      return aa - bb  x000D       x000D    sort alpha  function a  b    x000D      if  a 0     b 0   return 0  x000D      if  a 0   lt  b 0   return -1  x000D      return 1  x000D       x000D    sort ddmm  function a  b    x000D      mtch   a 0  match sorttable DATE RE   x000D      y   mtch 3   x000D      m   mtch 2   x000D      d   mtch 1   x000D      if  m length    1  m    0    m  x000D      if  d length    1  d    0    d  x000D      dt1   y   m   d  x000D      mtch   b 0  match sorttable DATE RE   x000D      y   mtch 3   x000D      m   mtch 2   x000D      d   mtch 1   x000D      if  m length    1  m    0    m  x000D      if  d length    1  d    0    d  x000D      dt2   y   m   d  x000D      if  dt1    dt2  return 0  x000D      if  dt1  lt  dt2  return -1  x000D      return 1  x000D       x000D    sort mmdd  function a  b    x000D      mtch   a 0  match sorttable DATE RE   x000D      y   mtch 3   x000D      d   mtch 2   x000D      m   mtch 1   x000D      if  m length    1  m    0    m  x000D      if  d length    1  d    0    d  x000D      dt1   y   m   d  x000D      mtch   b 0  match sorttable DATE RE   x000D      y   mtch 3   x000D      d   mtch 2   x000D      m   mtch 1   x000D      if  m length    1  m    0    m  x000D      if  d length    1  d    0    d  x000D      dt2   y   m   d  x000D      if  dt1    dt2  return 0  x000D      if  dt1  lt  dt2  return -1  x000D      return 1  x000D       x000D    shaker sort  function list  comp func    x000D      var b   0  x000D      var t   list length - 1  x000D      var swap   true  x000D      while  swap    x000D        swap   false  x000D        for  var i   b  i  lt  t    i    x000D          if  comp func list i   list i   1    gt  0    x000D            var q   list i   x000D            list i    list i   1   x000D            list i   1    q  x000D            swap   true  x000D            x000D          x000D        t--  x000D   x000D        if   swap  break  x000D   x000D        for  var i   t  i  gt  b  --i    x000D          if  comp func list i   list i - 1    lt  0    x000D            var q   list i   x000D            list i    list i - 1   x000D            list i - 1    q  x000D            swap   true  x000D            x000D          x000D        b    x000D   x000D        x000D      x000D    x000D  if  document addEventListener    x000D    document addEventListener  DOMContentLoaded   sorttable init  false   x000D    x000D     for Internet Explorer    x000D     cc on     x000D     if    win32  x000D      document write   lt script id   ie onload defer src javascript void 0  gt  lt   script gt     x000D      var script   document getElementById    ie onload    x000D      script onreadystatechange   function     x000D          if  this readyState     complete     x000D              sorttable init       call the onload handler x000D            x000D         x000D     end     x000D     for Safari    x000D  if   WebKit i test navigator userAgent        sniff x000D    var  timer   setInterval function     x000D      if   loaded complete  test document readyState     x000D        sorttable init       call the onload handler x000D        x000D       10   x000D    x000D     for other browsers    x000D  window onload   sorttable init  x000D   x000D  function dean addEvent element  type  handler    x000D    if  element addEventListener    x000D      element addEventListener type  handler  false   x000D      else   x000D      if   handler   guid  handler   guid   dean addEvent guid    x000D      if   element events  element events       x000D      var handlers   element events type   x000D      if   handlers    x000D        handlers   element events type        x000D        if  element  on    type     x000D          handlers 0    element  on    type   x000D          x000D        x000D      handlers handler   guid    handler  x000D      element  on    type    handleEvent  x000D      x000D     x000D  dean addEvent guid   1  x000D   x000D  function removeEvent element  type  handler    x000D    if  element removeEventListener    x000D      element removeEventListener type  handler  false   x000D      else   x000D      if  element events  amp  amp  element events type     x000D        delete element events type  handler   guid   x000D        x000D      x000D     x000D   x000D  function handleEvent event    x000D    var returnValue   true  x000D    event   event    fixEvent   this ownerDocument    this document    this  parentWindow    window  event   x000D    var handlers   this events event type   x000D    for  var i in handlers    x000D      this   handleEvent   handlers i   x000D      if  this   handleEvent event      false    x000D        returnValue   false  x000D        x000D      x000D    return returnValue  x000D     x000D   x000D  function fixEvent event    x000D    event preventDefault   fixEvent preventDefault  x000D    event stopPropagation   fixEvent stopPropagation  x000D    return event  x000D     x000D  fixEvent preventDefault   function     x000D    this returnValue   false  x000D     x000D  fixEvent stopPropagation   function     x000D    this cancelBubble   true  x000D    x000D  if   Array forEach    x000D    Array forEach   function array  block  context    x000D      for  var i   0  i  lt  array length  i      x000D        block call context  array i   i  array   x000D        x000D       x000D    x000D  Function prototype forEach   function object  block  context    x000D    for  var key in object    x000D      if  typeof this prototype key      undefined     x000D        block call context  object key   key  object   x000D        x000D      x000D     x000D  String forEach   function string  block  context    x000D    Array forEach string split      function chr  index    x000D      block call context  chr  index  string   x000D        x000D     x000D  var forEach   function object  block  context    x000D    if  object    x000D      var resolve   Object  x000D      if  object instanceof Function    x000D        resolve   Function  x000D        else if  object forEach instanceof Function    x000D        object forEach block  context   x000D        return  x000D        else if  typeof object     string     x000D        resolve   String  x000D        else if  typeof object length     number     x000D        resolve   Array  x000D        x000D      resolve forEach object  block  context   x000D      x000D    x000D  table sortable thead   x000D    background-color   eee  x000D    color   666666  x000D    font-weight  bold  x000D    cursor  default  x000D    x000D   lt table class  sortable  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt S L  lt  th gt  x000D         lt th gt name lt  th gt  x000D         lt th gt Goal lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt 1 lt  td gt  x000D         lt td gt Ronaldo lt  td gt  x000D         lt td gt 120 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 2 lt  td gt  x000D         lt td gt Messi lt  td gt  x000D         lt td gt 66 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 3 lt  td gt  x000D         lt td gt Ribery lt  td gt  x000D         lt td gt 10 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt 4 lt  td gt  x000D         lt td gt Bale lt  td gt  x000D         lt td gt 22 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    JS is used here without any other JQuery Plugin

User · Answer

x000D   x000D  var TableIDvalue    myTable   x000D  var TableLastSortedColumn   -1  x000D   x000D  function SortTable     x000D    var sortColumn   parseInt arguments 0    x000D    var type   arguments length  gt  1   arguments 1     T   x000D    var dateformat   arguments length  gt  2   arguments 2        x000D    var table   document getElementById TableIDvalue   x000D    var tbody   table getElementsByTagName  tbody   0   x000D    var rows   tbody getElementsByTagName  tr    x000D   x000D    var arrayOfRows   new Array    x000D   x000D    type   type toUpperCase    x000D   x000D    dateformat   dateformat toLowerCase    x000D   x000D    for  var i   0  len   rows length  i  lt  len  i      x000D      arrayOfRows i    new Object  x000D      arrayOfRows i  oldIndex   i  x000D      var celltext   rows i  getElementsByTagName  td   sortColumn  innerHTML replace   lt    gt    gt  g       x000D      if  type     D     x000D        arrayOfRows i  value   GetDateSortingKey dateformat  celltext   x000D        else   x000D        var re   type     N          -   d  g      a-zA-Z0-9  g  x000D        arrayOfRows i  value   celltext replace re      substr 0  25  toLowerCase    x000D        x000D      x000D   x000D    if  sortColumn    TableLastSortedColumn    x000D      arrayOfRows reverse    x000D      else   x000D      TableLastSortedColumn   sortColumn  x000D      switch  type    x000D        case  N   x000D          arrayOfRows sort CompareRowOfNumbers   x000D          break  x000D        case  D   x000D          arrayOfRows sort CompareRowOfNumbers   x000D          break  x000D        default  x000D          arrayOfRows sort CompareRowOfText   x000D        x000D      x000D    var newTableBody   document createElement  tbody    x000D   x000D    for  var i   0  len   arrayOfRows length  i  lt  len  i      x000D      newTableBody appendChild rows arrayOfRows i  oldIndex  cloneNode true    x000D      x000D    table replaceChild newTableBody  tbody   x000D    x000D   x000D  function CompareRowOfText a  b    x000D    var aval   a value  x000D    var bval   b value  x000D    return  aval    bval   0    aval  gt  bval   1   -1    x000D    x000D   x000D  function deleteRow i    x000D    document getElementById  myTable   deleteRow i  x000D    x000D   lt table id  myTable  border  1  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt input type  button  onclick  javascript  SortTable 0   T     value  SORT    gt  lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Shaa lt  td gt  x000D         lt td gt ABC lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt cnubha lt  td gt  x000D         lt td gt XYZ lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Fine lt  td gt  x000D         lt td gt MNO lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Amit lt  td gt  x000D         lt td gt PQR lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Sultan lt  td gt  x000D         lt td gt FGH lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hello lt  td gt  x000D         lt td gt UST lt  td gt  x000D         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this parentNode parentNode rowIndex     gt  lt  td gt  x000D       lt  tr gt  x000D   x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I ve been working on a function to work within a library for a client  and have been having a lot of trouble keeping the UI responsive during the sorts  even with only a few hundred results    The function has to resort the entire table each AJAX pagination  as new data may require injection further up  This is what I had so far    jQuery library required  table is the ID of the table being sorted  The table attributes sort-attribute  sort-direction and the column attribute column are all pre-set    Using some of the details above I managed to improve performance a bit   function sorttable table        var context           table   tbody           table     tbody    sortfield     context  data  sort-attribute    c  dir     context  data  sort-direction    index     context  find  thead th data-column      sortfield         index        if   sortfield            sortfield     context  data  id-attribute               switch  dir            case  asc               tbody find  tr   sort function  a  b                    var sortvala   parseFloat   a  find  td eq     index        text                     var sortvalb   parseFloat   b  find  td eq     index        text                        if a  lt  b return 1                 return sortvala  lt  sortvalb   1                           else if a  gt  b return -1                          sortvala  gt  sortvalb   -1                           else they are equal - return 0                              0                 appendTo tbody               break          case  desc           default              tbody find  tr   sort function  a  b                    var sortvala   parseFloat   a  find  td eq     index        text                     var sortvalb   parseFloat   b  find  td eq     index        text                        if a  lt  b return 1                 return sortvala  gt  sortvalb   1                           else if a  gt  b return -1                          sortvala  lt  sortvalb   -1                           else they are equal - return 0                              0                 appendTo tbody           break        In principle the code works perfectly  but it s painfully slow    are there any ways to improve performance

User · Answer

You can use jQuery DataTables plugin for applying column sorting in desired way   Column Sorting using DataTable

User · Answer

use Javascript sort   function  var  tbody      table tbody     tbody find  tr   sort function a b        var tda     a  find  td eq 1    text       can replace 1 with the column you want to sort on     var tdb     b  find  td eq 1    text       this will sort on the second column                if a  lt  b return 1     return tda  lt  tdb   1                else if a  gt  b return -1              tda  gt  tdb   -1                else they are equal - return 0                  0                appendTo  tbody     If you want ascending you just have to reverse the   and  lt   Change the logic accordingly for you   FIDDLE

User · Answer

I found  naota s solution useful  and extended it to use dates as well   taken from StackOverflow    https   stackoverflow com questions 3880615 how-can-i-determine-whether-a-given-string-represents-a-date function isDate val        var d   new Date val       return  isNaN d valueOf        var getVal   function elm  n     var v     elm  children  td   eq n  text   toUpperCase      if   isNumeric v        v   parseFloat v 10       return v        if  isDate v         v   new Date v       return v        return v

User · Answer

You might want to see this page   http   blog niklasottosson com  p 1914  I guess you can go something like this   DEMO http   jsfiddle net g9eL6768 2   HTML     lt table id  mytable  gt  lt thead gt     lt tr gt        lt th id  sl  gt S L  lt  th gt        lt th id  nm  gt name lt  th gt     lt  tr gt            JS       sortTable f n      f   1 ascending order  -1 descending order     n   n-th child  lt td gt   of  lt tr gt  function sortTable f n       var rows       mytable tbody  tr   get         rows sort function a  b             var A   getVal a           var B   getVal b            if A  lt  B                return -1 f                    if A  gt  B                return 1 f                    return 0               function getVal elm           var v     elm  children  td   eq n  text   toUpperCase            if   isNumeric v                v   parseInt v 10                     return v               each rows  function index  row                mytable   children  tbody   append row             var f sl   1     flag to toggle the sorting order var f nm   1     flag to toggle the sorting order     sl   click function        f sl    -1     toggle the sorting order     var n     this  prevAll   length      sortTable f sl n           nm   click function        f nm    -1     toggle the sorting order     var n     this  prevAll   length      sortTable f nm n         Hope this helps

User · Answer

Offering an interactive sort handling multiple columns is nothing trivial   Unless you want to write a good amount of code handling logic for multiple row clicks  editing and refreshing page content  managing sort algorithms for large tables    then you really are better off adopting a plug-in   tablesorter   with updates by Mottie  is my favorite  It   s easy to get going and very customizable  Just add the class tablesorter to the table you want to sort  then invoke the tablesorter plugin in a document load event     function            myTable   tablesorter          You can browse the documentation to learn about advanced features

[javascript] Sorting table rows according to table header column using javascript or jquery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to html-table