How to sort html table with javascript?

Question

I have such table which is created by multiple php codes from multiple mysql tables.

I just want to sort it by date column (Second TD's) by javascript.

UPDATED: I just need the table sorted automatically by date column on page load. I don't want to sort it again by clicking theads. AND this is not the only table in my page. So i need to tell to javascript which table i should sort.

Anyone has any idea?

Because i create this table by many select queries from many mysql tables. Printing TR's after every select query. Thats why i can't sort it by queries with order by. — , May 27 '17 at 13:02
then you should really wait for all the data before printing the `tr` — A. L, May 27 '17 at 13:04
You are taking the wrong approach. On the server, compile the data to one place instead of printing it on the site, and then sort it and printing it in one go. — Gala, May 27 '17 at 13:18
@Gala can you please give some more details about your idea? An example would be perfect. — , May 27 '17 at 13:24
Make a data structure that describes a table, populate the structure with the table data, sort it and then send it back to the client. That would be just a step before the user sees the data, server side. — Gala, May 27 '17 at 17:22
Does this answer your question? [Sorting HTML table with JavaScript](https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript) — handle, Dec 18 '19 at 11:17

score 0 · Answer 1 · answered May 27 '17 at 12:27

0

If you don't have to consider server-side pagination of your data have a look at jquery tablesorter. Demo right here.

answered May 27 '17 at 12:27

ju_

569
1
4
17

Thanks but it's not sorting exactly. Just some rows are changing because it is sorting by the DAY values of date column. Not total date. – May 27 '17 at 12:58
have a look at date format https://mottie.github.io/tablesorter/docs/example-option-date-format.html – ju_ May 27 '17 at 13:04
convert the date in the sortFunction bevore comparing the values.. give multiple tables an id and alter the selector... – Frank Wisniewski May 27 '17 at 13:15

Frank Wisniewski · Answer 2 · 2017-05-27T13:04:48.660

I have a pure js solution in my drawer cabinet...

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>
        table{
            width: 500px;
        }

        th, td {
        text-align: center;
        min-width:200px;
        }

        td:nth-child(1), th:nth-child(1) {
            min-width: 100px;
        }

        thead {
            background-color: #000;
            color: #fff;
        }

        thead tr {
            display: block;
            position: relative;
        }

    tbody {
        display: block;
        overflow: auto;
       overflow-x:hidden;
        width: 100%;
        height: 100px;
    }

    tbody tr:nth-child(even) {
        background-color: #dddddd;
    }

    </style>
<body>

<table>
    <thead>
        <tr>
            <th>Nummer</th>
            <th>Deutsch</th>
            <th>Englisch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>eins</td>
            <td>one</td>
        </tr>
        <tr>
            <td>2</td>
            <td>zwei</td>
            <td>two</td>
        </tr>
        <tr>
            <td>3</td>
            <td>drei</td>
            <td>three</td>
        </tr>
        <tr>
            <td>4</td>
            <td>vier</td>
            <td>four</td>
        </tr>
        <tr>
            <td>5</td>
            <td>fünf</td>
            <td>five</td>
        </tr>
        <tr>
            <td>6</td>
            <td>sechs</td>
            <td>six</td>
        </tr>
        <tr>
            <td>7</td>
            <td>sieben</td>
            <td>seven</td>
        </tr>
        <tr>
            <td>8</td>
            <td>acht</td>
            <td>eight</td>
        </tr>
        <tr>
            <td>9</td>
            <td>neun</td>
            <td>nine</td>
        </tr>

    </tbody>
</table>    

<script>
   eval('var $=x($,_){return(_)?[].slice.call(zAll($)).forEach(_):z($)},$s=x(e,r,v){$(e,x(_){_.style[r]=v})},$o=x(e,v,f){$(e,x(_){_.addEventListener(v,f)})}'.replace(/x/g,"function").replace(/z/g,'document.querySelector'));
   function colSort(a, colIndex){
      a.sort(sortFunction);
      function sortFunction(a, b) {
          if (a[colIndex] === b[colIndex]) {
              return 0;
          }
          else {
              return (a[colIndex] < b[colIndex]) ? -1 : 1;
          }
      }
      return a;
   }
   var tableContent = [],count = 0;
    $('tbody tr', function(_){
      tableContent[count]=[];
      var cols = _.querySelectorAll('td');
      for (i=0;i<cols.length;i++){
        tableContent[count][i]=cols[i].innerHTML;
      }
      count++;
      });
    
    var sortCol=function(colToSort){
      var temp = [];
          $('thead tr th', function(_){
            temp.push(_.innerHTML);
          })
          //var cSort = temp.indexOf(this.innerHTML);
          var newSort = colSort(tableContent,colToSort-1);
          count =0;  
          $('tbody tr', function(_){
            var cols = _.querySelectorAll('td');
            for (i=0;i<cols.length;i++){
              cols[i].innerHTML=newSort[count][i];
          }
          count++;
        });
    }
    sortCol(2);
    
</script>

</body>
</html>

That is simple i have altered my code. Only call sortCol(2) or the Col you have to sort — Frank Wisniewski, May 27 '17 at 13:06

How to sort html table with javascript?

2 Answers2