0

Galera, tenho as seguintes colunas na minha tabela, e uma delas é o "Month" ele recebe um int que é referente ao numero do mes (1 - Jan, 2 - Fev, etc) Quando a tela carrega a tabela exibe os meses na ordem certa porém se eu clico pra ordenar, ele ordena por ordem alfabetica, como faço pra ordenar pela sequencia dos meses?

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;
            }
        }
    }
];

Tabela quando carrega a tela: inserir a descrição da imagem aqui

Quando clico para ordenar por mes: inserir a descrição da imagem aqui

3
  • Tenta usar isso aqui: $('#idDaTabela').DataTable( { "order": [[ 2, "asc" ]] } ); Fonte aqui 20/12/2018 às 14:09
  • Não funcionou ,quando mando ordenar ele ainda ordena por ordem alfabetica 20/12/2018 às 14:34
  • Você pode inserir a coluna com o número do mês e ocultar usando o display: none na célula e pode usar a função que mandei referenciando o indice da coluna 20/12/2018 às 16:40

1 Resposta 1

1

Você pode inserir a coluna com o número do mês e ocultar usando o display: none na célula

Ai "order": [[ 0, "asc" ]] é de acordo com a coluna

No exemplo abaixo o indico mês está na coluna 0

Veja o exemplo que eu fiz:

$('#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>

Espero que ajude

1
  • Mano, antes de ler sua resposta eu tava fazendo de um jeito parecido, a unica coisa que precisei fazer alem disso ,foi mudar o trigger do sort da coluna com o nome do mes pra essa coluna hidden, então toda vez q ele clicava pra dar o sort na coluna do mes com o name, ele mudava o trigger pra essa coluna ai, valeu !! 21/12/2018 às 13:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .