Stackoverflow Question: #38655258

http://stackoverflow.com/questions/38655258/sorting-date-and-time-with-jquery-in-the-table

by GioLogist

HTML

<table border="1">
    <thead>
        <th>pro</th>
        <th>date</th>
        <th>notes</th>
    </thead>
    <tbody id="alice">
        <tr class="foobar" data-date="2016-05-23 03:10">
            <td>img</td>
            <td>
                <span class="statuschange">icon</span> 23 may, 03:10
            </td>
            <td>Dolor sit amet, consectetur adipisicing elit. Quae ut consequatur, facere quaerat Est.</td>
            <td></td>
        </tr>
        <tr class="foobar" data-date="2016-09-22 03:10">
            <td>img</td>
            <td>
                <span class="comment">icon</span> 22 sep, 03:10
            </td>
            <td>Nemo consectetur saepe possimus, dolor vero excepturi voluptas! </td>
            <td></td>
        </tr>
        <tr class="foobar" data-date="2016-05-28 11:19">
            <td>img</td>
            <td>
                <span class="request">icon</span> 28 may, 11:19
            </td>
            <td>Iure, nam cum perspiciatis, doloribus</td>
            <td></td>
        </tr>
        <tr class="foobar" data-date="2016-07-16 17:05">
            <td>img</td>
            <td>
                <span class="notes">icon</span> 16 jul, 17:05
            </td>
            <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td>
            <td>updated date</td>
        </tr>
        <tr class="foobar" data-date="2016-07-16 21:05">
            <td>img</td>
            <td>
                <span class="notes">icon</span> 16 jul, 21:05
            </td>
            <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td>
            <td></td>
        </tr>
        <tr class="foobar" data-date="2016-12-12 21:05">
            <td>img</td>
            <td>
                <span class="notes">icon</span> 12 dec, 21:05
            </td>
            <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td>
            <td></td>
        </tr>
        <tr class="foobar" data-date="2016-6-10 21:05">
        ...

CSS

table {
  border-collapse: collapse;
}

table tr td {
  padding: 4px;
}

table tr td:nth-child(2) {
  width: 150px;
}

JavaScript

var john = $.makeArray($(".foobar"));
john.sort(function(a, b) {

    var aDate = new Date($(a).data('date'));
    var bDate = new Date($(b).data('date'));
    return (bDate) - (aDate);
    
});
$("#alice").html(john);