Tablesorter Ajax排序

Question

I need to sort a table with 3 columns which have 3 differents dates. The table is built in ajax. In every load, ajax load the table and dates are unsortable. I've tried to change dateFormat and other but impossible to make this possible. Can you help me ? Here it is :

if($('#listeDevis') && $('#listerDevis') && $('#listerDevis').val() == 'true'){
    $.ajax({
        url : '/actions/listerDevisEnCours',
        dataType : 'html',
        beforeSend : function(){
            $('#loaderDevis').show();
        },
        success : function(data){
            $('#listeDevis').html(data);
            $('#nombreDevis').text($('#nombreDevisList').val());
            $('.tachesTables').hide();
            $('.bulleAide').hide();
            $('.infoComplementaire').hide();
            $('#tachesDevisEnCoursTables').show();
            $('.tachesTitres').click(function(){
                $('.tachesTables').hide();
                $('.tachesTitres').children('span').text('+');
                $(this).next().show();
                $(this).children('span').text('-');
            });

            $('.voirBulleAide').hover(function(){
                var top = $(this).offset().top - $(this).next('.bulleAide').innerHeight() - 4;
                $(this).next('.bulleAide').show().css({'top': top + 'px'});
            }, function(){
                $('.bulleAide').hide();
            });
            $('.voirInfoComplementaire').hover(function(){
                var top = $(this).offset().top - $(this).children('.infoComplementaire').innerHeight() - 4;
                $(this).children('.infoComplementaire').show().css({'top': top + 'px'});
            }, function(){
                $('.infoComplementaire').hide();
            });
        },
        complete : function(){
            $('#loaderDevis').hide();
            $('#tacheEnCours').addClass('trierTable').tablesorter({
                dateFormat: "uk",
                headers: {
                    2: "shortDate",
                    7: "shortDate",
                    8: "shortDate"
                }
            });
            $('#tacheEnCours').trigger('update');
        },
        error : function(jqXHR,textStatus, errorThrown){
            console.log(jqXHR);console.log(textStatus);console.log(errorThrown);    
            // alert("Erreur lors de la connexion au serveur");
        }
    });
}

Thanks for your help !

Edit : Sorry @Mottie i am late, I have been assigned to another project and then I didn't fix this bug. Sorry again, let me show you the html. This table is generated in ajax and the format is dd/mm/yyyy. I already tried to set the format on uk but it didn't work...

<table border="0" cellspacing="0" cellpadding="0"  id="tacheEnCours">
  <thead>
  <tr>
    <th class="numEntete">N&ordm;</th>
    <th class="dateEntete">Date</th>
    <th class="clientEntete">Client</th>
    <th class="statutEntete">Statut</th>
    <th class="comEntete">Commentaire</th>
    <th class="dateEntete">Date Statut</th>
    <th class="dateEntete">Date &Eacute;ch&eacute;ance</th>
  </tr>
  </thead>
  <tbody id="listeDevis">
  </tbody>
</table>

UPDATE :

I've tried your code but it still doesn't work... I don't understand why other columns work but just date columns doesn't work... I have set a right dateFormat with sorter: "shortDate".

$.ajax({
        url : '/actions/listerDevisEnCours',
        dataType : 'html',
        beforeSend : function(){
            $('#loaderDevis').show();
        },
        success : function(data){
            $('#listeDevis').html(data);
            $('#nombreDevis').text($('#nombreDevisList').val());
            $('.tachesTables').hide();
            $('.bulleAide').hide();
            $('.infoComplementaire').hide();
            $('#tachesDevisEnCoursTables').show();
            $('.tachesTitres').click(function(){
                $('.tachesTables').hide();
                $('.tachesTitres').children('span').text('+');
                $(this).next().show();
                $(this).children('span').text('-');
            });
            $('.voirBulleAide').hover(function(){
                var top = $(this).offset().top -                        $(this).next('.bulleAide').innerHeight() - 4;
                $(this).next('.bulleAide').show().css({'top': top + 'px'});
            }, function(){
                $('.bulleAide').hide();
            });
            $('.voirInfoComplementaire').hover(function(){
                var top = $(this).offset().top - $(this).children('.infoComplementaire').innerHeight() - 4;
                $(this).children('.infoComplementaire').show().css({'top': top + 'px'});
            }, function(){
                $('.infoComplementaire').hide();
            });
        },
        complete : function(){
            $('#loaderDevis').hide();
            $('#tacheEnCours').tablesorter({
                dateFormat: 'uk',
                headers: {
                    1: {sorter: "shortDate"},
                    5: {sorter: "shortDate"},
                    6: {sorter: "shortDate"}
                }
            });
        },
        error : function(jqXHR,textStatus, errorThrown){
            console.log(jqXHR);console.log(textStatus);console.log(errorThrown);    
            // alert("Erreur lors de la connexion au serveur");
        }
    });

Answer 1

If you are using my fork of tablesorter, you can set the dateFormat option as an overall table setting, or per column

$(function(){
  $("table").tablesorter({

    dateFormat : "mmddyyyy", // default date format

    // or to change the format for specific columns,
    // add the dateFormat to the headers option:
    headers: {
      0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
      1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
      2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // year first format
    }

  });
});

The original tablesorter has different dateFormat settings, and which do not work within the headers option:

• us
• uk
• pt
• dd/mm/yy
• dd-mm-yy

---

The code you shared needs to be combined because you can't initialize tablesorter a second time to change options. Try this:

$('#tacheEnCours').addClass('trierTable').tablesorter({
    dateFormat: 'uk',
    headers: {
       1: {sorter: "shortDate"},
       5: {sorter: "shortDate"},
       6: {sorter: "shortDate"}
    }
});

As I stated above, the dataFormat: "ddmmyyyy" won't work on the original version of tablesorter.