Sort months by Name Jquery Datatables

Question

Guys, I have the following columns in my table, and one of them is the "Month" it gets an int that refers to the number of the month (1 - Jan, 2 - Feb, etc.) When the screen loads the table displays the months in the right order but if I click to order, it sorts in alphabetical order, how do I sort by the sequence of months?

var colsCurrency = [
    { data: 'Year', orderable: true, className: 'col-sm-2 text-center', title: 'Year' },
    {
        data: 'Month', orderable: true, className: 'col-sm-2 text-center', title: 'Month', render: function (data) {
            month = data;
            switch (month) {
                case 1:
                    colMonth = "January";
                    break;
                case 2:
                    colMonth = "February";
                    break;
                case 3:
                    colMonth = "March";
                    break;
                case 4:
                    colMonth = "April";
                    break;
                case 5:
                    colMonth = "May";
                    break;
                case 6:
                    colMonth = "June";
                    break;
                case 7:
                    colMonth = "July";
                    break;
                case 8:
                    colMonth = "August";
                    break;
                case 9:
                    colMonth = "September";
                    break;
                case 10:
                    colMonth = "October";
                    break;
                case 11:
                    colMonth = "November";
                    break;
                case 12:
                    colMonth = "December";
                    break;
            }
            return colMonth;
        }
    },
    { data: 'Name', orderable: true, className: 'col-sm-2 text-center', title: 'Type' },
    {
        data: 'ValueUsTax', orderable: true, className: 'col-sm-2 text-center', title: 'Tx Dollar', render: function(data, type, full) {
            return parseFloat(data).toFixed(4);
        }},
    {
        data: 'ValueCcyFactor', orderable: true, className: 'col-sm-2 text-center', title: 'CCY Factor', render: function (data, type, full) {
            return parseFloat(data).toFixed(4);
        }
    },
    {
        data: null, orderable: false, className: 'text-center col-sm-1', title: 'Actions', render: function (data, type, full) {
            if (data.ActiveFlag) {
                var retorno = '<nobr><button type="button" class="btn btn-xs btn-default" title="Edit" onclick="EditCurrencyById(' + full.CurrencyId + ')"><i class="glyphicon glyphicon-pencil"></i></button>&nbsp;&nbsp;';
                retorno += '<button type="button" class="btn btn-xs btn-danger" title="Delete" onclick="DeleteCurrency(' + full.CurrencyId + ')"><i class="glyphicon glyphicon-remove"></i></button></nobr>';
                return retorno;
            }

            else {
                var retorno = '<button type="button" class="btn btn-xs btn-primary" title="Active" onclick="Active(' + full.CurrencyId + ')"><i class="glyphicon glyphicon-off"></i></button></nobr>';
                return retorno;
            }
        }
    }
];

Table when loading the screen:

When I click to sort by month:

Answer 1

You can insert the column with the month number and hide using the display: none in the cell

Ai "order": [[ 0, "asc" ]] is according to the column

In the example below the month index is in the column 0

Look at the example I made:

$('#example').DataTable( {
        "order": [[ 0, "asc" ]]
    } );

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
  

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-responsive table-hover table-stripped">
   <thead>
     <th style="display: none">mes</th>
     <th>mes</th>
     <th>mes</th>
   </thead>
   <tbody>
      <tr>
         <td style="display: none">12</td>
         <td>Dezembro</td>
         <td>Dez/2018</td>         
      </tr>      
      <tr>
         <td style="display: none">10</td>
         <td>Outburo</td>
         <td>Out/2018</td>         
      </tr>      
      <tr>
         <td style="display: none">11</td>
         <td>Novembro</td>
         <td>Nov/2018</td>         
      </tr>      
      <tr>
         <td style="display: none">2</td>
         <td>Fevereiro</td>
         <td>Fev/2018</td>         
      </tr>      
      <tr>
         <td style="display: none">4</td>
         <td>Abril</td>
         <td>Abr/2018</td>         
      </tr>      
      <tr>
         <td style="display: none">9</td>
         <td>Agosto</td>
         <td>Ago/2018</td>         
      </tr> 
      <tr>
         <td style="display: none">5</td>
         <td>Maio</td>
         <td>Mai/2018</td>         
      </tr> 
      <tr>
         <td style="display: none">3</td>
         <td>Março</td>
         <td>Mar/2018</td>         
      </tr> 
      <tr>
         <td style="display: none">7</td>
         <td>Julho</td>
         <td>Jul/2018</td>         
      </tr> 
      <tr>
         <td style="display: none">1</td>
         <td>Janeiro</td>
         <td>Jan/2018</td>         
      </tr>
      <tr>
         <td style="display: none">6</td>
         <td>Junho</td>
         <td>Jun/2018</td>         
      </tr>
      <tr>
         <td style="display: none">6</td>
         <td>Junho</td>
         <td>Jun/2018</td>         
      </tr>
   </tbody>
   <tfooter>
   <th style="display: none">mes</th>
     <th>mes</th>
     <th>mes</th>
   </tfooter>
</table>

I hope it helps