jQuery table sort

Question

I have a very simple HTML table with 4 columns    Facility Name  Phone    City  Specialty   I want the user to be able to sort by Facility Name and City only   How can I code this using jQuery

User · Answer

We just started using this slick tool   https   plugins jquery com tablesorter   There is a video on its use at   http   www highoncoding com Articles 695 Sorting GridView Using JQuery TableSorter Plug in aspx          tableRoster   tablesorter           headers                0    sorter  false                4    sorter  false                       With a simple table   lt table id  tableRoster  gt           lt thead gt                      lt tr gt                       lt th gt  lt input type  checkbox  class  rCheckBox  value  all  id  rAll   gt  lt  th gt                       lt th gt User lt  th gt                       lt th gt Verified lt  th gt                       lt th gt Recently Accessed lt  th gt                       lt th gt  amp nbsp  lt  th gt                     lt  tr gt           lt  thead gt

User · Answer

My answer would be  be careful    A lot of jQuery table-sorting add-ons only sort what you pass to the browser   In many cases  you have to keep in mind that tables are dynamic sets of data  and could potentially contain zillions of lines of data   You do mention that you only have 4 columns  but much more importantly  you don t mention how many rows we re talking about here   If you pass 5000 lines to the browser from the database  knowing that the actual database-table contains 100 000 rows  my question is  what s the point in making the table sortable   In order to do a proper sort  you d have to send the query back to the database  and let the database  a tool actually designed to sort data  do the sorting for you   In direct answer to your question though  the best sorting add-on I ve come across is Ingrid   There are many reasons that I don t like this add-on   unnecessary bells and whistles     as you call it   but one of it s best features in terms of sort  is that it uses ajax  and doesn t assume that you ve already passed it all the data before it does its sort   I recognise that this answer is probably overkill  and over 2 years late  for your requirements  but I do get annoyed when developers in my field overlook this point   So I hope someone else picks up on it   I feel better now

User · Answer

This is a nice way of sorting a table     x000D   x000D    document  ready function      x000D                     th   each function  col    x000D                        this  hover  x000D                              function      x000D                                    this  addClass  focus    x000D                                 x000D                              function      x000D                                    this  removeClass  focus    x000D                                x000D                         x000D                        this  click function      x000D                          if    this  is   asc      x000D                                this  removeClass  asc    x000D                                this  addClass  desc selected    x000D                              sortOrder   -1  x000D                            else   x000D                                this  addClass  asc selected    x000D                                this  removeClass  desc    x000D                              sortOrder   1  x000D                            x000D                            this  siblings   removeClass  asc selected    x000D                            this  siblings   removeClass  desc selected    x000D                          var arrData      table   find  tbody  gt tr has td    get    x000D                          arrData sort function  a  b    x000D                              var val1     a  children  td   eq col  text   toUpperCase    x000D                              var val2     b  children  td   eq col  text   toUpperCase    x000D                              if    isNumeric val1   amp  amp    isNumeric val2   x000D                                  return sortOrder    1   val1 - val2   val2 - val1  x000D                              else x000D                                  return  val1  lt  val2    -sortOrder    val1  gt  val2    sortOrder   0  x000D                              x000D                            each arrData  function  index  row    x000D                                 tbody   append row   x000D                              x000D                          x000D                      x000D                  x000D              table  th  td   x000D              border  1px solid black  x000D            x000D          th   x000D              cursor  pointer  x000D            x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D           lt tr gt  lt th gt id lt  th gt  lt th gt name lt  th gt  lt th gt age lt  th gt  lt  tr gt  x000D           lt tr gt  lt td gt 1 lt  td gt  lt td gt Julian lt  td gt  lt td gt 31 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt 2 lt  td gt  lt td gt Bert lt  td gt  lt td gt 12 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt 3 lt  td gt  lt td gt Xavier lt  td gt  lt td gt 25 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt 4 lt  td gt  lt td gt Mindy lt  td gt  lt td gt 32 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt 5 lt  td gt  lt td gt David lt  td gt  lt td gt 40 lt  td gt  lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    The fiddle can be found here  https   jsfiddle net e3s84Luw   The explanation can be found here  https   www learningjquery com 2017 03 how-to-sort-html-table-using-jquery-code

User · Answer

My vote  jquery sortElements js and simple jquery Very simple  very easy  thanks nandhp                    th   live  click   function                 var th     this   thIndex   th index    var table     this  parent   parent                     switch   this  attr  inverse                     case  false   inverse   true  break                  case  true    inverse   false  break                  default  inverse   false  break                                th attr  inverse  inverse               table find  td   filter function                    return   this  index       thIndex                 sortElements function a  b                   return   text  a    gt    text  b                         inverse   -1   1                       inverse   1   -1                 function                       parentNode is the element we want to move                 return this parentNode                               inverse    inverse                         Dei uma melhorada do c  digo One cod better  Function for All tables in all Th in all time    Look it  DEMO

User · Answer

By far  the easiest one I ve used is   http   datatables net   Amazingly simple   just make sure if you go the DOM replacement route  IE  building a table and letting DataTables reformat it  then make sure to format your table with  lt thead gt  and  lt tbody gt  or it won t work   That s about the only gotcha   There s also support for AJAX  etc   As with all really good pieces of code  it s also VERY easy to turn it all off   You d be suprised what you might use  though   I started with a  bare  DataTable that only sorted one field and then realized that some of the features were really relevant to what I m doing   Clients LOVE the new features   Bonus points to DataTables for full ThemeRoller support      I ve also had ok luck with tablesorter  but it s not nearly as easy  not quite as well documented  and has only ok features

User · Answer

You can use a jQuery plugin  breedjs  that provides sort  filter and pagination   HTML    lt table gt     lt thead gt       lt tr gt         lt th sort  name  gt Name lt  th gt         lt th gt Phone lt  th gt         lt th sort  city  gt City lt  th gt         lt th gt Speciality lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr b-scope  people  b-loop  person in people  gt         lt td b-sort  name  gt   person name   lt  td gt         lt td gt   person phone   lt  td gt         lt td b-sort  city  gt   person city   lt  td gt         lt td gt   person speciality   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    JS     function      var data         people           name   c   phone  123  city   b   speciality   a           name   b   phone  345  city   a   speciality   c           name   a   phone  234  city   c   speciality   b                 breed run       scope   people       input  data            th sort    click function        breed sort         scope   people         selector    this  attr  sort                       Working example on fiddle

User · Answer

I ended up using Nick s answer  the most popular but not accepted  https   stackoverflow com a 19947532 5271220  and combined it with the https   stackoverflow com a 16819442 5271220 but didn t want to add icons or fontawesome to the project  The CSS styles for sort-column-asc desc I did color  padding  rounded border    I also modified it to go by class rather than by any  so we could control which ones are sortable  This could also come in handy later if there are two tables although more modifications would need to be done for that   body    html      lt thead gt  n       html      lt th gt  lt  th gt  n       html      lt th class   sort-header   gt Name  lt span gt  lt  span gt  lt  i gt  lt  th gt  n       html      lt th class   sort-header   gt Status  lt span gt  lt  span gt  lt  th gt  n       html      lt th class   sort-header   gt Comments  lt span gt  lt  span gt  lt  th gt  n       html      lt th class   sort-header   gt Location  lt span gt  lt  span gt  lt  th gt  n       html      lt th nowrap class   sort-header   gt Est  return  lt span gt  lt  span gt  lt  th gt  n       html      lt  thead gt  n       html      lt tbody gt  n             further down the body     body   on  click     sort-header   function  e        var table     this  parents  table   eq 0      var rows   table find  tr gt 0    toArray   sort comparer   this  index         this asc    this asc     if   this asc    rows   rows reverse         for  var i   0  i  lt  rows length  i      table append rows i          setIcon e target  this asc         functions   function comparer index            return function  a  b                var valA   getCellValue a  index   valB   getCellValue b  index              return   isNumeric valA   amp  amp    isNumeric valB    valA - valB   valA toString   localeCompare valB                       function getCellValue row  index            return   row  children  td   eq index  text              function setIcon element  inverse             var iconSpan     element  find  span             if  inverse    true                  iconSpan  removeClass                  iconSpan  addClass  sort-column-asc                  iconSpan  0  innerHTML      amp  8593      arrow up           else                 iconSpan  removeClass                  iconSpan  addClass  sort-column-desc                  iconSpan  0  innerHTML      amp  8595      arrow down                       element  siblings   find  span   each function  i  obj                  obj  removeClass                obj innerHTML

User · Answer

Here s a chart that may be helpful deciding which to use  http   blog sematext com 2011 09 19 top-javascript-dynamic-table-libraries

User · Answer

Another approach to sort HTML table   based on W3 JS HTML Sort    x000D   x000D     Facility Name    x000D      bioTable th eq 0    addClass  control-label pointer    x000D     Phone      x000D      bioTable th eq 1    addClass  not-allowed    x000D     City    x000D      bioTable th eq 2    addClass  control-label pointer    x000D     Specialty    x000D      bioTable th eq 3    addClass  not-allowed    x000D   x000D   x000D  var collection      x000D     FacilityName    MinION   x000D     Phone    999-8888   x000D     City    France   x000D     Specialty    Genetic Prediction  x000D       x000D     FacilityName    GridION X5   x000D     Phone    999-8812   x000D     City    Singapore   x000D     Specialty    DNA Assembly  x000D       x000D     FacilityName    PromethION   x000D     Phone    929-8888   x000D     City    San Francisco   x000D     Specialty    DNA Testing  x000D       x000D     FacilityName    iSeq 100 System   x000D     Phone    999-8008   x000D     City    Christchurch   x000D     Specialty    gDNA-mRNA sequencing  x000D     x000D   x000D   tbody       bioTable   append   lt tbody gt  lt  tbody gt     x000D   x000D  for  var i   0  i  lt  collection length  i      x000D     tbody    tbody append   lt tr class  item  gt  lt td gt     collection i   FacilityName       lt  td gt  lt td gt     collection i   Phone       lt  td gt  lt td gt     collection i   City       lt  td gt  lt td gt     collection i   Specialty       lt  td gt  lt  tr gt     x000D    x000D   control-label after   x000D    content       x000D    color  red  x000D    x000D   x000D   pointer   x000D    cursor  pointer  x000D    x000D   x000D   not-allowed   x000D    cursor  not-allowed  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   www w3schools com lib w3 js  gt  lt  script gt  x000D   lt link href  https   www w3schools com w3css 4 w3 css  rel  stylesheet    gt  x000D   lt p gt Click the  lt strong gt table headers lt  strong gt  to sort the table accordingly  lt  p gt  x000D   x000D   lt table id  bioTable  class  w3-table-all  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th onclick  w3 sortHTML   bioTable     item    td nth-child 1     gt Facility Name lt  th gt  x000D         lt th gt Phone   lt  th gt  x000D         lt th onclick  w3 sortHTML   bioTable     item    td nth-child 3     gt City lt  th gt  x000D         lt th gt Specialty lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I came across this  and thought I d throw in my 2 cents  Click on the column headers to sort ascending  and again to sort descending    Works in Chrome  Firefox  Opera AND IE 8  Only uses JQuery Does alpha and numeric sorting - ascending and descending    x000D   x000D     th   click function    x000D      var table     this  parents  table   eq 0  x000D      var rows   table find  tr gt 0    toArray   sort comparer   this  index     x000D      this asc    this asc x000D      if   this asc  rows   rows reverse    x000D      for  var i   0  i  lt  rows length  i    table append rows i    x000D     x000D  function comparer index    x000D      return function a  b    x000D          var valA   getCellValue a  index   valB   getCellValue b  index  x000D          return   isNumeric valA   amp  amp    isNumeric valB    valA - valB   valA toString   localeCompare valB  x000D        x000D    x000D  function getCellValue row  index   return   row  children  td   eq index  text     x000D  table  th  td   x000D      border  1px solid black  x000D    x000D  th   x000D      cursor  pointer  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D       lt tr gt  lt th gt Country lt  th gt  lt th gt Date lt  th gt  lt th gt Size lt  th gt  lt  tr gt  x000D       lt tr gt  lt td gt France lt  td gt  lt td gt 2001-01-01 lt  td gt  lt td gt 25 lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt  lt a href   gt spain lt  a gt  lt  td gt  lt td gt 2005-05-05 lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Lebanon lt  td gt  lt td gt 2002-02-02 lt  td gt  lt td gt -17 lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Argentina lt  td gt  lt td gt 2005-04-04 lt  td gt  lt td gt 100 lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt USA lt  td gt  lt td gt  lt  td gt  lt td gt -6 lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D       Update  2018   For those that are interested  I ve provided an ES6 Plain Javascript solution here

User · Answer

I love this accepted answer  however  rarely do you get requirements to sort html and not have to add icons indicating the sorting direction  I took the accept answer s usage example and fixed that quickly by simply adding bootstrap to my project  and adding the following code    lt div gt  lt  div gt   inside each  lt th gt  so that you have a place to set the icon   setIcon this  inverse    from the accepted answer s Usage  below the line   th click function       and by adding the setIcon method   function setIcon element  inverse             var iconSpan     element  find  div             if  inverse    false                  iconSpan  removeClass                  iconSpan  addClass  icon-white icon-arrow-up              else                 iconSpan  removeClass                  iconSpan  addClass  icon-white icon-arrow-down                        element  siblings   find  div   removeClass            Here is a demo  --You need to either run the demo in Firefox or IE  or disable Chrome s MIME-type checking for the demo to work  It depends on the sortElements Plugin  linked by the accepted answer  as an external resource  Just a heads up

User · Answer

This one does not hang up the browser s  easy configurable further   var table      table        th sortable   click function        var table     this  parents  table   eq 0       var ths   table find  tr gt 0    toArray   sort compare   this  index          this asc    this asc      if   this asc         ths   ths reverse        for  var i   0  i  lt  ths length  i           table append ths i         function compare idx        return function a  b           var A   tableCell a  idx   B   tableCell b  idx         return   isNumeric A   amp  amp    isNumeric B               A - B   A toString   localeCompare B           function tableCell tr  index        return   tr  children  td   eq index  text

User · Answer

To the response of James I will only change the sorting function to make it more universal  This way it will sort text alphabetical and numbers like numbers   if    text  a        text  b         return 0  if isNaN   text  a     amp  amp  isNaN   text  b          return   text  a    gt    text  b             inverse   -1   1          inverse   1   -1    else      return parseInt   text  a     gt  parseInt   text  b             inverse   -1   1         inverse   1   -1

User · Answer

Nick Grealy s answer is great  but it does not take into account possible rowspan attributes of the table header cells  and probably the other answers don t do it either   Here is an improvement of the  Nick Grealy s answer which fixes that  Based on this answer too  thanks  Andrew Orlov    I ve also replaced the   isNumeric function with a custom one  thanks  zad  to make it work with older jQuery versions   To activate it  add class  sortable  to the  lt table gt  tag     document  ready function             table sortable th   click function            var table     this  parents  table   eq 0           var column index   get column index this           var rows   table find  tbody tr   toArray   sort comparer column index            this asc    this asc          if   this asc  rows   rows reverse             for  var i   0  i  lt  rows length  i    table append rows i                  function comparer index        return function a  b            var valA   getCellValue a  index   valB   getCellValue b  index           return isNumber valA   amp  amp  isNumber valB    valA - valB   valA localeCompare valB           function getCellValue row  index   return   row  children  td   eq index  html       function isNumber n      return  isNaN parseFloat n    amp  amp  isFinite n      function get column index element        var clickedEl     element       var myCol   clickedEl closest  th   index        var myRow   clickedEl closest  tr   index        var rowspans      th rowspan         rowspans each function              var rs     this           var rsIndex   rs closest  tr   index            var rsQuantity   parseInt rs attr  rowspan             if  myRow  gt  rsIndex  amp  amp  myRow  lt   rsIndex   rsQuantity - 1                myCol                             alert  Row      myRow      Column      myCol       return myCol

User · Answer

If you want to avoid all the bells and whistles then may I suggest this simple sortElements plugin  Usage   var table      table         sortable th        wrapInner   lt span title  sort this column   gt         each function             var th     this               thIndex   th index                inverse   false           th click function                 table find  td   filter function                     return   this  index       thIndex                  sortElements function a  b                    if    text  a        text  b                         return 0                   return   text  a    gt    text  b                         inverse   -1   1                       inverse   1   -1                  function                        parentNode is the element we want to move                 return this parentNode                                 inverse    inverse                          And a demo   click the  city  and  facility  column-headers to sort

[jquery] jQuery table sort

Examples related to jquery

Examples related to sorting

Examples related to html-table