Jquery datatable tri numérique

Question

J'ai utilisé la datation jquery pour le tri des tables pour les données suivantes.

 <table width="50%" border="0" id="pls-pitching"> 
    <tr> 
    <td><span>1</span> 
    <input name="t" type="text" value="1" /></td> 
    </tr> 
    <tr> 
    <td><span>5</span> 
    <input name="t" type="text" value="5" /></td> 
    </tr> 

    <tr> 
    <td><span>2</span> 
    <input name="t" type="text" value="2" /></td> 
    </tr> 
    <tr> 
    <td><span>3</span> 
    <input name="t" type="text" value="3" /></td> 
    </tr> 
    <tr> 
    <td><span>10</span> 
    <input name="t" type="text" value="10" /></td> 
    </tr> 
    </table> 

Ici, je veux trier les valeurs de zone de texte comme 1,2,3,5,10 je ne pouvais pas mettre en œuvre le tri de la valeur de zone de texte. J'ai donc ajouté la balise <span> avant la zone de texte (<span>10</span>). Maintenant, il trie les valeurs. Mais il sorte comme 1,10,2,3,5

Mais j'ai besoin de trier comme le type numérique.

J'ai utilisé la commande javascript suivante

$('#pls-pitching').dataTable(); 

Est-il possible de mettre en œuvre le tri de la valeur de zone de texte? S'il vous plaît faites le nécessaire. Merci

Answer 1

Vous devez écrire votre propre fonction pour faire la comparaison. Here is example of how to do it

Answer 2

J'ai eu le même problème, ce qui est ce qui a fonctionné pour moi,

1.Définir type personnalisé de tri (pour les valeurs numériques)

jQuery.fn.dataTableExt.oSort['num-html-asc'] = function(a,b) { 
    var x = a.replace(/<.*?>/g, ""); 
    var y = b.replace(/<.*?>/g, ""); 
    x = parseInt(x); 
    y = parseInt(y); 
    return ((x < y || isNaN(y)) ? -1 : ((x > y || isNaN(x)) ? 1 : 0)); 
}; 
jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) { 
    var x = a.replace(/<.*?>/g, ""); 
    var y = b.replace(/<.*?>/g, ""); 
    x = parseInt(x); 
    y = parseInt(y); 
    return ((x < y || isNaN(x)) ? 1 : ((x > y || isNaN(y)) ? -1 : 0)); 
}; 

2.Réglez le type de tri alors que initialisation datable,

$(".fooTable").dataTable({ 
    "aoColumns": [ 
     {"sType" : "num-html" }] 
});