Datatable sort months names in cronological order

JavaScript
1

Hi,

I’m using datatable to show a list of months, it works fine but it does show months in alphabetical order instead of chronological.
I need it to show months like “january, february, march etc”

this is what i’ve done so far


	jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-range-pre": function ( a ) {
        var monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
        return monthArr.indexOf(a); 
    },
     "date-range-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
     "date-range-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

 $(document).ready(function() {



    var dataTable = $('#lista_pagamenti').DataTable({

      "processing": true,
      "serverSide": true,
      "scrollX": true, // Permette lo scroll orizzontale su mobile
      // columnDefs permette di gestire lo stile di ogni singola colonna, tioo allinemaento testo etc
      'columnDefs': [

      	  { "sType": "date-range", "targets": 0, }
      ],

      "language": {

        "sEmptyTable": "Nessun dato presente nella tabella",
        "sInfo": "Vista da _START_ a _END_ di _TOTAL_ elementi",
        "sInfoEmpty": "Vista da 0 a 0 di 0 elementi",
        "sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
        "sInfoPostFix": "",
        "sInfoThousands": ".",
        "sLengthMenu": "Visualizza _MENU_ elementi",
        "sLoadingRecords": "Caricamento...",
        "sProcessing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Elaborazione...</span>',
        "sSearch": "Cerca:",
        "sZeroRecords": "La ricerca non ha portato alcun risultato.",
        "oPaginate": {
          "sFirst": "Inizio",
          "sPrevious": "Precedente",
          "sNext": "Successivo",
          "sLast": "Fine"
        },
        "oAria": {
          "sSortAscending": ": attiva per ordinare la colonna in ordine crescente",
          "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
        }
      },

      buttons: [

        {
          extend: 'print',
          className: 'btn dark btn-outline',
          messageTop: 'PDF created by PDFMake with Buttons for DataTables.',
          exportOptions: {
            columns: [0, 1]
          }
        },

        {
          extend: 'copy',
          className: 'btn red btn-outline',
          exportOptions: {
            columns: [0, 1]
          }
        },

        {
          extend: 'pdfHtml5',
          className: 'btn green btn-outline',
          pageSize: 'A4',
          title: 'Lista dettagli clienti registrati',
          exportOptions: {
            columns: [0, 1]
          }

        },

        {
          extend: 'colvis',
          className: 'btn dark btn-outline',
          text: 'Columns'
        }

      ],



      "dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
      "sDom": '<"top"fl>rt<"bottom"ip><"clear">',

      "ajax": {
        url: "../controllers/ctrl_client_flat_app/ctrl_client_get_payment_list.php",
        type: "POST",
        async: 'true',
      }


    });

    // Mostro il pulsante strumenti per esportare i dati della tabella
    $('#sample_3_tools > li > a.tool-action').on('click', function() {
      var action = $(this).attr('data-action');
      $('#lista_pagamenti').DataTable().button(action).trigger();
    });

  }); // Fine document ready
2

what value does the function receive? I’m guessing it doesnt just receive the Month, which would obliviate the lookup because everything returns -1…

3

Hi @m_hutley thanks for your help the value come from database using Ajax call and it stored as month into the database if you wan’t I can also post the php code

4

Could you try instead of an array to set an object with months?ie

var monthArr ={1:'Jan',2: 'Feb',3: 'Mar',4: 'Apr',5: 'May',6: 'Jun',7: 'Jul',8: 'Aug',10: 'Sept',11: 'Oct',12: 'Nov',13: 'Dec'};
5

if you put this into your code:

    "date-range-pre": function ( a ) {
        var monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
        console.log(a);
        return monthArr.indexOf(a); 
    },

what comes out of the console?

6

Hi @m_hutley thanks for your help, console.log doesn’t show any message :frowning: it looks like datatable can’t read the function

7

So the function isnt actually getting called, which explains why it’s not sorting the way you think it should :wink:

It LOOKS like DataTables has made the type of function extension you’re defining here deprecated, and have instead implemented Moment.

https://datatables.net/blog/2014-12-18

Take a look, perhaps that is your solution path?

8

Hi @m_hutley thanks for your help I didn’t know it was deprecated, do you have any idea how to achieve it using moment?
Many thanks again

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.