tablesorter ajax,jquery - Tablesorter ajax sorting - Stack Overflow

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...

NºDateClientStatutCommentaireDate StatutDate Échéance

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");

}

});