Sorting HTML table with JavaScript

Question

I m after a table sorting solution  in JavaScript  but I can t seem to find a suitable one yet  I just need it to sort each column alphabetically  It doesn t need to ignore any code or any numbers or to work with currency  Just a click on the column header switches it from sorted a-z z-a    Does anyone know of a really simple solution like this

User · Answer

Nick Grealy s accepted answer is great but acts a bit quirky if your rows are inside a  lt tbody gt  tag  the first row isn t ever sorted and after sorting rows end up outside of the tbody tag  possibly losing formatting    This is a simple fix  however   Just change   document querySelectorAll  th   forEach th   gt  th addEventListener  click         gt      const table   th closest  table      Array from table querySelectorAll  tr nth-child n 2          sort comparer Array from th parentNode children  indexOf th   this asc    this asc        forEach tr   gt  table appendChild tr       to   document querySelectorAll  th   forEach th   gt  th addEventListener  click         gt      const table   th closest  table      const tbody   table querySelector  tbody      Array from tbody querySelectorAll  tr         sort comparer Array from th parentNode children  indexOf th   this asc    this asc        forEach tr   gt  tbody appendChild tr

User · Answer

I have edited the code from one of the example here to use jquery  It s still not 100  jquery though  Any thoughts on the two different versions  like what are the pros and cons of each  function column sort         getCellValue    tr  idx    gt    tr  find  td   eq  idx   text         comparer    idx  asc    gt   a  b    gt    v1  v2    gt           v1         amp  amp  v2         amp  amp   isNaN v1   amp  amp   isNaN v2    v1 - v2   v1 toString   localeCompare v2            getCellValue asc   a   b  idx   getCellValue asc   b   a  idx             table     this  closest  table   0       tbody     table  find  tbody   0        elm     this  0       children   elm parentNode children      Array from tbody querySelectorAll  tr    sort  comparer          Array from children  indexOf elm   table asc    table asc            forEach tr   gt  tbody appendChild tr        table find  thead th   on  click   column sort

User · Answer

x000D   x000D   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt    table  td  th       border  1px solid      border-collapse  collapse        td   th       padding  5px      width  100px        th       background-color  lightgreen       lt  style gt   lt  head gt   lt body gt    lt h2 gt JavaScript Array Sort lt  h2 gt    lt p gt Click the buttons to sort car objects on age  lt  p gt    lt p id  demo  gt  lt  p gt    lt script gt  var nameArrow       yearArrow       var cars        type  Volvo   year 2016      type  Saab   year 2001      type  BMW   year 2010     yearACS   true  function sortYear       if  yearACS        nameArrow           yearArrow           cars sort function a b          return a year - b year              yearACS   false     else       nameArrow           yearArrow           cars sort function a b          return b year - a year              yearACS   true        displayCars      nameACS   true  function sortName       if  nameACS        nameArrow           yearArrow           cars sort function a b          x   a type toLowerCase          y   b type toLowerCase          if  x  gt  y   return 1         if  x  lt  y   return -1         return 0              nameACS   false      else       nameArrow           yearArrow           cars sort function a b          x   a type toUpperCase          y   b type toUpperCase          if  x  gt  y    return -1         if  x  lt y    return 1          return 0              nameACS   true        displayCars       displayCars     function displayCars       var txt     lt table gt  lt tr gt  lt th onclick  sortName    gt name     nameArrow     lt  th gt  lt th onclick  sortYear    gt year     yearArrow     lt  th gt  lt tr gt      for  let i   0  i  lt  cars length  i          txt      lt tr gt  lt td gt    cars i  type     lt  td gt  lt td gt     cars i  year     lt  td gt  lt  tr gt          txt      lt  table gt      document getElementById  demo   innerHTML   txt      lt  script gt    lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

It does WAY more than  just sorting   but dataTables net does what you need  I use it daily and is well supported and VERY fast  does require jQuery   http   datatables net      DataTables is a plug-in for the jQuery Javascript library  It is a highly flexible tool  based upon the foundations of progressive enhancement  which will add advanced interaction controls to any HTML table    Google Visualizations is another option  but requires a bit more setup that dataTables  but does NOT require any particular framework library  other than google visualizations     http   code google com apis ajax playground  type visualization table  And there are other options to    especially if you re using one of the other JS frameworks  Dojo  Prototype  etc all have usable  table enhancement  plugins that provide at minimum table sorting functionality  Many provide more  but I ll restate   I ve yet to come across one as powerful and as FAST as datatables net

User · Answer

In case your table does not have ths but only tds  with headers included  you can try the following which is based on Nick Grealy s answer above    x000D   x000D  const getCellValue    tr  idx    gt  tr children idx  innerText    tr children idx  textContent  x000D   x000D  const comparer    idx  asc    gt   a  b    gt    v1  v2    gt   x000D      v1         amp  amp  v2         amp  amp   isNaN v1   amp  amp   isNaN v2    v1 - v2   v1 toString   localeCompare v2  x000D        getCellValue asc   a   b  idx   getCellValue asc   b   a  idx    x000D   x000D     do the work    x000D  document querySelectorAll  tr first-child td   forEach td   gt  td addEventListener  click         gt    x000D      const table   td closest  table    x000D      Array from table querySelectorAll  tr nth-child n 2     x000D           sort comparer Array from td parentNode children  indexOf td   this asc    this asc   x000D           forEach tr   gt  table appendChild tr     x000D        x000D   charset  UTF-8   x000D   import url  https   fonts googleapis com css family Roboto    x000D   x000D     x000D    font-family   Roboto   sans-serif  x000D    text-transform capitalize  x000D    overflow hidden  x000D    margin  0 auto  x000D    text-align left  x000D    x000D   x000D  table   x000D   color  666  x000D   font-size 12px  x000D   background  124  x000D   border  ccc 1px solid  x000D   -moz-border-radius 3px  x000D   -webkit-border-radius 3px  x000D   border-radius 3px  x000D    border-collapse  collapse  x000D    width  100   x000D    x000D   x000D  table td   x000D   padding 10px  x000D   border-top  1px solid  ffffff  x000D   border-bottom 1px solid  e0e0e0  x000D   border-left  1px solid  e0e0e0  x000D   background   fafafa  x000D   background  -webkit-gradient linear  left top  left bottom  from  fbfbfb   to  fafafa    x000D   background  -moz-linear-gradient top    fbfbfb    fafafa   x000D    width  6 9in  x000D    x000D   x000D  table tbody tr first-child td x000D    x000D   background   124 important  x000D    color  fff  x000D    x000D   x000D  table tbody tr th x000D    x000D    padding 10px  x000D    border-left  1px solid  e0e0e0  x000D   background   124 important  x000D    color  fff  x000D    x000D   lt table gt  x000D           lt tr gt  lt td gt Country lt  td gt  lt td gt Date lt  td gt  lt td gt Size lt  td 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  lt i gt 25 lt  i gt  lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt spain 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  lt b gt -17 lt  b gt  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

User · Answer

The best way I know to sort HTML table with javascript is with the following function.

Just pass to it the id of the table you'd like to sort and the column number on the row. it assumes that the column you are sorting is numeric or has numbers in it and will do regex replace to get the number itself (great for currencies and other numbers with symbols in it).

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');            
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
}

Using example:

$(function(){
    // pass the id and the <td> place you want to sort by (td counts from 0)
    sortTable('table_id', 3);
});

User · Answer

I wrote up some code that will sort a table by a row, assuming only one <tbody> and cells don't have a colspan.

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
// sortTable(tableNode, columId, false);

If you don't want to make the assumptions above, you'd need to consider how you want to behave in each circumstance. (e.g. put everything into one <tbody> or add up all the preceeding colspan values, etc.)

You could then attach this to each of your tables, e.g. assuming titles are in <thead>

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

and then invoking makeAllSortable onload.

Example fiddle of it working on a table.

User · Answer

You could deal with a json array and the sort function. It is a pretty easy maintanable structure to manipulate (ex: sorting).

Untested, but here's the idea. That would support multiple ordering and sequential ordering if you pass in a array in which you put the columns in the order they should be ordered by.

var DATA_TABLE = {
    {name: 'George', lastname: 'Blarr', age:45},
    {name: 'Bob', lastname: 'Arr', age: 20}
    //...
};

function sortDataTable(arrayColNames, asc) { // if not asc, desc
    for (var i=0;i<arrayColNames.length;i++) {
        var columnName = arrayColNames[i];
        DATA_TABLE = DATA_TABLE.sort(function(a,b){
            if (asc) {
                return (a[columnName] > b[columnName]) ? 1 : -1;
            } else {
                return (a[columnName] < b[columnName]) ? 1 : -1;
            }
        });
    }
}

function updateHTMLTable() {
    // update innerHTML / textContent according to DATA_TABLE
    // Note: textContent for firefox, innerHTML for others
}

Now let's imagine you need to order by lastname, then name, and finally by age.

var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);

It should result in something like :

{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...

User · Answer

Sorting html table column on page load           var table      table all items table    var rows   table find  tr gt 0    toArray   sort comparer 3    for  var i   0  i  lt  rows length  i          table append rows i     function comparer index        return function  a  b            var v1  getCellValue a  index           v2  getCellValue b  index           return   isNumeric v2   amp  amp    isNumeric v1    v2 - v1  v2 localeCompare v1            function getCellValue row  index        return parseFloat   row  children  td   eq index  html   replace    g         1234234 45645- gt 1234234

User · Answer

Here is a complete example using pure JavaScript. The algorithm used for sorting is basically BubbleSort. Here is a Fiddle.

   <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">

<script type="text/javascript">
    function sort(ascending, columnClassName, tableId) {
        var tbody = document.getElementById(tableId).getElementsByTagName(
                "tbody")[0];
        var rows = tbody.getElementsByTagName("tr");

        var unsorted = true;

        while (unsorted) {
            unsorted = false

            for (var r = 0; r < rows.length - 1; r++) {
                var row = rows[r];
                var nextRow = rows[r + 1];

                var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
                var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;

                value = value.replace(',', '.'); // in case a comma is used in float number
                nextValue = nextValue.replace(',', '.');

                if (!isNaN(value)) {
                    value = parseFloat(value);
                    nextValue = parseFloat(nextValue);
                }

                if (ascending ? value > nextValue : value < nextValue) {
                    tbody.insertBefore(nextRow, row);
                    unsorted = true;
                }
            }
        }
    };
</script>
</head>
<body>
    <table id="content-table">
        <thead>
            <tr>
                <th class="id">ID <a
                    href="javascript:sort(true, 'id', 'content-table');">asc</a> <a
                    href="javascript:sort(false, 'id', 'content-table');">des</a>
                </th>
                <th class="country">Country <a
                    href="javascript:sort(true, 'country', 'content-table');">asc</a> <a
                    href="javascript:sort(false, 'country', 'content-table');">des</a>
                </th>
                <th class="some-fact">Some fact <a
                    href="javascript:sort(true, 'some-fact', 'content-table');">asc</a>
                    <a href="javascript:sort(false, 'some-fact', 'content-table');">des</a>
                <th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="id">001</td>
                <td class="country">Germany</td>
                <td class="some-fact">16.405</td>
            </tr>
            <tr>
                <td class="id">002</td>
                <td class="country">France</td>
                <td class="some-fact">10.625</td>
            </tr>
            <tr>
                <td class="id">003</td>
                <td class="country">UK</td>
                <td class="some-fact">15.04</td>
            </tr>
            <tr>
                <td class="id">004</td>
                <td class="country">China</td>
                <td class="some-fact">13.536</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

You can also check out the source from here: https://github.com/wmentzel/table-sort

User · Answer

Just revisiting an old solution  I thought I d give it a facelift for it s  5 year anniversary    Plain Javascript  ES6  Does alpha and numeric sorting - ascending and descending Works in Chrome  Firefox  Safari  and IE11  see below    Quick explanation   add a click event to all header  th  cells      for the current table  find all rows  except the first      sort the rows  based on the value of the clicked column    insert the rows back into the table  in the new order      x000D   x000D  const getCellValue    tr  idx    gt  tr children idx  innerText    tr children idx  textContent  x000D   x000D  const comparer    idx  asc    gt   a  b    gt    v1  v2    gt   x000D      v1         amp  amp  v2         amp  amp   isNaN v1   amp  amp   isNaN v2    v1 - v2   v1 toString   localeCompare v2  x000D        getCellValue asc   a   b  idx   getCellValue asc   b   a  idx    x000D   x000D     do the work    x000D  document querySelectorAll  th   forEach th   gt  th addEventListener  click         gt    x000D      const table   th closest  table    x000D      Array from table querySelectorAll  tr nth-child n 2     x000D           sort comparer Array from th parentNode children  indexOf th   this asc    this asc   x000D           forEach tr   gt  table appendChild tr     x000D        x000D  table  th  td   x000D      border  1px solid black  x000D    x000D  th   x000D      cursor  pointer  x000D    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  lt i gt 25 lt  i gt  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  lt i gt 2005-05-05 lt  i gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt  lt b gt Lebanon lt  b gt  lt  td gt  lt td gt  lt a href   gt 2002-02-02 lt  a gt  lt  td gt  lt td gt  lt b gt -17 lt  b gt  lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt  lt i gt Argentina lt  i gt  lt  td gt  lt td gt 2005-04-04 lt  td gt  lt td gt  lt a href   gt 100 lt  a gt  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      IE11 Support  non-ES6   If you want to support IE11  you ll need to ditch the ES6 syntax and use alternatives to Array from and Element closest   i e     var getCellValue   function tr  idx   return tr children idx  innerText    tr children idx  textContent     var comparer   function idx  asc    return function a  b    return function v1  v2            return v1         amp  amp  v2         amp  amp   isNaN v1   amp  amp   isNaN v2    v1 - v2   v1 toString   localeCompare v2         getCellValue asc   a   b  idx   getCellValue asc   b   a  idx            do the work    Array prototype slice call document querySelectorAll  th    forEach function th    th addEventListener  click   function             var table   th parentNode         while table tagName toUpperCase       TABLE   table   table parentNode          Array prototype slice call table querySelectorAll  tr nth-child n 2                  sort comparer Array prototype slice call th parentNode children  indexOf th   this asc    this asc                forEach function tr    table appendChild tr

User · Answer

Another approach to sort HTML table   based on W3 JS HTML Sort    x000D   x000D  var collection      x000D     Country    France   x000D     Date    2001-01-01   x000D     Size    25   x000D       x000D     Country    spain   x000D     Date    2005-05-05   x000D     Size       x000D       x000D     Country    Lebanon   x000D     Date    2002-02-02   x000D     Size    -17   x000D       x000D     Country    Argentina   x000D     Date    2005-04-04   x000D     Size    100   x000D       x000D     Country    USA   x000D     Date       x000D     Size    -6   x000D     x000D   x000D  for  var j   0  j  lt  3  j      x000D        myTable th eq     j        addClass  control-label clickable    x000D        myTable th eq     j        attr  onClick    w3 sortHTML   myTable     item    td nth-child      j   1            x000D    x000D   x000D   tbody       myTable   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   Country       lt  td gt  lt td gt     collection i   Date       lt  td gt  lt td gt     collection i   Size       lt  td gt  lt  tr gt     x000D    x000D   control-label after   x000D    content       x000D    color  red  x000D    x000D   x000D   clickable   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 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  myTable  class  w3-table-all  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Country lt  th gt  x000D         lt th gt Date lt  th gt  x000D         lt th gt Size lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Sorting table rows by cell   1  Little simpler and has some features   2  Distinguish  number  and  string  on sorting  3  Add toggle to sort by ASC  DESC  var index          cell index var toggleBool     sorting asc  desc  function sorting tbody  index       this index   index      if toggleBool           toggleBool   false       else          toggleBool   true             var datas  new Array        var tbodyLength   tbody rows length      for var i 0  i lt tbodyLength  i             datas i    tbody rows i                 sort by cell index       datas sort compareCells       for var i 0  i lt tbody rows length  i                rearrange table rows by sorted rows         tbody appendChild datas i                function compareCells a b        var aVal   a cells index  innerText      var bVal   b cells index  innerText       aVal   aVal replace     g           bVal   bVal replace     g            if toggleBool           var temp   aVal          aVal   bVal          bVal   temp              if aVal match    0-9       amp  amp  bVal match    0-9                return parseFloat aVal  - parseFloat bVal             else            if  aVal  lt  bVal                 return -1              else if  aVal  gt  bVal                   return 1              else                return 0                                        below is html sample               lt table summary  Pioneer  gt                    lt thead gt                       lt tr gt                           lt th scope  col   onclick  sorting tbody01  0   gt No  lt  th gt                           lt th scope  col   onclick  sorting tbody01  1   gt Name lt  th gt                           lt th scope  col   onclick  sorting tbody01  2   gt Belong lt  th gt                           lt th scope  col   onclick  sorting tbody01  3   gt Current Networth lt  th gt                           lt th scope  col   onclick  sorting tbody01  4   gt BirthDay lt  th gt                           lt th scope  col   onclick  sorting tbody01  5   gt Just Number lt  th gt                       lt  tr gt                   lt  thead gt                    lt tbody id  tbody01  gt                       lt tr gt                           lt td gt 1 lt  td gt                           lt td gt Gwanshic Yi lt  td gt                           lt td gt Gwanshic Home lt  td gt                           lt td gt 120000 lt  td gt                           lt td gt 1982-03-20 lt  td gt                           lt td gt 124 124 523 lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 2 lt  td gt                           lt td gt Steve Jobs lt  td gt                           lt td gt Apple lt  td gt                           lt td gt 19000000000 lt  td gt                           lt td gt 1955-02-24 lt  td gt                           lt td gt 194 523 lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 3 lt  td gt                           lt td gt Bill Gates lt  td gt                           lt td gt MicroSoft lt  td gt                           lt td gt 84300000000 lt  td gt                           lt td gt 1955-10-28 lt  td gt                           lt td gt 1 524 124 523 lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 4 lt  td gt                           lt td gt Larry Page lt  td gt                           lt td gt Google lt  td gt                           lt td gt 39100000000 lt  td gt                           lt td gt 1973-03-26 lt  td gt                           lt td gt 11 124 523 lt  td gt                       lt  tr gt                   lt  tbody gt               lt  table gt

[javascript] Sorting HTML table with JavaScript

The answer is

Examples related to javascript

Examples related to sorting

Examples related to html-table

Tags