Javascript sort table div by time date

Question

I have a table like this


  
    
      John
    
    paid
    1/11/20221:59:08 PM
    
      
      
    
  
  
    
      David
    
    paid
    1/11/202212:10:00 AM
    
      
      
    
  
  
    
      Vonn
    
    paid
    1/11/202212:40:02 AM
    
      
      
    
  
  
    
      Anna
    
    paid
    1/11/20223:02:01 PM

How I can sort this table by time date, only with javascript, without using jquery, newest on top?

I read about sorting by number here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_number

But I dont know how to do it. Can you please help me?

user_295783 · Answer

Here is a sort on date and time

I assume the classnames are static. If dynamic we need more code

I also added some CSS for visualisation

The datestring of 1/11/2022 1:59:08 PM is parsable without RegExp so I use it as is

const container = document.querySelector(".wrapper-3OdqYJdx")
const getDateFromSpans = spans => new Date(`${spans[0].textContent} ${spans[1].textContent}`);

const rows = [...container.querySelectorAll(".bodyRow-OX45")]
  .sort((a,b)=> getDateFromSpans(a.querySelectorAll('.timeCell-OX45 span')) - getDateFromSpans(b.querySelectorAll('.timeCell-OX45 span')))
container.append(...rows)

.bodyRow-OX45 { border: 1px solid black; }
span::after { content: " - " }


  
    
      John
    
    paid
    1/11/20221:59:08 PM
    
      
      
    
  
  
    
      David
    
    paid
    1/11/202212:10:00 AM
    
      
      
    
  
  
    
      Vonn
    
    paid
    1/11/202212:40:02 AM
    
      
      
    
  
  
    
      Anna
    
    paid
    1/11/20223:02:01 PM

Admin · Answer

I would convert the children list of the container into an array of [Date, Element] pairs, sort by the first column, then convert the sorted array of [Date, Element] pairs back into an array of Elements. Finally, you just have to loop through the resulting array to append the child elements into the container one by one.

var map = Array.prototype.map;
var mainEl = document.getElementById("main");
var childEls = map.call(mainEl.children, function (el) {
  var d = el.children[0].textContent;
  var t = el.children[1].textContent;
  return [Date.parse(d + " " + t), el];
}).sort(function (a, b) {
  return a[0] - b[0];
}).map(function (pair) {
  return pair[1];
});
for (let childEl of childEls) {
  mainEl.appendChild(childEl);
}


  1/11/2022 1:59:08 PM  David
  1/11/2022 12:10:00 AM Anna
  1/11/2022 12:40:02 AM John
  1/11/2022 3:02:01 PM  Vonn

Just in case you don't know map or call:

> | [1, 2, 3].map(function (x) {
  |   return x + 1;
  | })
< | [2, 3, 4]
> | Array.prototype.map.call([1, 2, 3], function (x) {
  |   return x + 1;
  | })
< | [2, 3, 4]

The map.call pattern is required because mainEl.children has no map method (type document.children.map in the browser console and see what happens).

Side note

As suggested in the comments, in modern JS syntax you would write childEls = [...mainEl.children].map(...), which boils down to the same result. However, I did a perf test a couple of years ago to compare stuffs like map.call(mainEl.children, ...) and [...mainEl.children].map(...), and the modern syntax was far slower than the old one. Maybe things have changed since then, I let you check by yourself :-)

It's probably a good idea to write your own "parse" function, because you never know how the browser implementation of Date.parse(...) deals with non standard date formats. Just pick the various bits from d + " " + t, and make a Date object with new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

user_3603681 · Answer

Another variant on the above. Query all elements to find the spans containing the dates and generate a timestamp to use in the comparison. An array sort function can compare the values to sort the results as desired before regenerating the HTML.

const d=document;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);

const parent=q('div.wrapper-3OdqYJdx');
const col=qa('div.timeCell-OX45');
const nodes=[];

col.forEach( div=>{
  let tmp={
    node:div.parentNode,
    time:new Date( [ ...qa('span', div ) ].map( span=>{
      return span.textContent;
    }).join(' ') ).getTime()
  };
  nodes.push( tmp )
});


nodes.sort( (a,b)=>{
  if( a.time > b.time )return 1;
  if( a.time < b.time )return -1
  if( a.time==b.time )return 0;
});

parent.innerHTML='';
nodes.forEach( obj=>parent.appendChild( obj.node ) );

span{padding:0.25rem}


  
    
      John
    
    paid
    1/11/20221:59:08 PM
    
      
      
    
  
  
  
    
      David
    
    paid
    1/11/202212:10:00 AM
    
      
      
    
  
  
  
    
      Vonn
    
    paid
    1/11/202212:40:02 AM
    
      
      
    
  
  
  
    
      Anna
    
    paid
    1/11/20223:02:01 PM

user_6934495 · Answer

Your classes in Dom may be generated dynamic, so this answer will help you:

const times = document.querySelectorAll('div[class*="timeCell"] span:first-child')

const data=[];

times.forEach( item => {
 data.push({
   time: new Date(item.innerText+" "+item.nextElementSibling.innerText ).getTime(),
   parent: item.parentElement.parentElement

 })
})


data.sort(function (a, b) {
  return a.time - b.time;
});

const newDom = document.querySelector('div[class*="wrapper"]');
data.forEach(item => newDom.append(item.parent));

div[class*="timeCell"] span:first-child{
color:red;
}


  
    
      John
    
    paid
    1/11/20221:59:08 PM
    
      
      
    
  
  
    
      David
    
    paid
    1/11/202212:10:00 AM
    
      
      
    
  
  
    
      Vonn
    
    paid
    1/11/202212:40:02 AM
    
      
      
    
  
  
    
      Anna
    
    paid
    1/11/20223:02:01 PM

Javascript sort table div by time date

4 Answers