jQuery sort HTML tables with custom order

Question

I want to be able to sort my tables by month.

Example:

February
December
October
August
July

When sorted it should be

February
July
August
October 
December

I've experimented with a few jQuery plugins online and none of them had the option to create a custom sort order.

Thanks!

possible duplicate of : http://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date — JonSG, Aug 01 '16 at 16:30

score 3 · Accepted Answer · answered Aug 01 '16 at 17:44

Let's immagine to add an attribute for each table row called sort-order.

Now, we can order the table according to this attribute:

$(function () {
  // sort the table rows
  var sortedTableRows = $('table tbody tr').get().sort(function (a, b) {
    var aVal = +a.getAttribute('sort-order');
    var bVal = +b.getAttribute('sort-order');
    return (aVal > bVal) ? 1 : (aVal < bVal) ? -1 : 0;
  });
  
  // substitute the table rows with the ordered one
  $.each(sortedTableRows, function (i, e) {
    $('table tbody').append(e);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
    <thead>
    <th>
        <tr>
            <td>Months</td>
        </tr>
    </th>
    </thead>
    <tbody>
    <tr sort-order="12">
        <td>January</td>
    </tr>
    <tr sort-order="11">
        <td>February</td>
    </tr>
    <tr sort-order="10">
        <td>March</td>
    </tr>
    <tr sort-order="9">
        <td>April</td>
    </tr>
    <tr sort-order="8">
        <td>May</td>
    </tr>
    <tr sort-order="7">
        <td>June</td>
    </tr>
    <tr sort-order="6">
        <td>July</td>
    </tr>
    <tr sort-order="5">
        <td>August</td>
    </tr>
    <tr sort-order="4">
        <td>September</td>
    </tr>
    <tr sort-order="3">
        <td>October</td>
    </tr>
    <tr sort-order="2">
        <td>November</td>
    </tr>
    <tr sort-order="1">
        <td>December</td>
    </tr>
    </tbody>
</table>

Hi, gaetanoM. Thanks for your help, but, I want to be able to automatically sort my tables without adding any attribute. I used charlietfl's answer to this question: https://stackoverflow.com/questions/30227960/custom-table-sort-using-jquery-or-javascript But it only made a duplicate of my page. Here's an example: http://cms5.revize.com/revize/haddonfield/departments/table_sort_test/index.php — Chad, Aug 01 '16 at 17:49
@Chad Thanks so much. I took a look to your site and I see the problem but I cannot understand where the charlietfl function is. I tested that solution and it's perfect. My answer was based on a generic consideration. — gaetanoM, Aug 01 '16 at 17:58
gaetanoM. I just fixed the issue. The problem was that the buttons right before the tables are wrapped in a table and it's appending my table inside that table. Thanks for your help. I'll use your code with my projects in the future. — Chad, Aug 01 '16 at 18:08

jQuery sort HTML tables with custom order

1 Answers1