Efetivamente, a ordenação baseia-se no conteúdo das células, pelo que, mesmo escondido, o HTML presente na célula vai impossibilitar a ordenação da mesma de forma numérica.
A solução nestes casos passa por criar uma função auxiliar para ordenar a coluna(s) pretendida(s).
Para o efeito, a DataTables permite expandir a sua estrutura para aplicar uma função personalizada para ordenação ascendente e descendente cujas mesmas tem incidência sobre o valor passado no parâmetro sType
:
jQuery.fn.dataTableExt.oSort["meuValorSType-desc"] = function (x, y) {
// código aqui
};
jQuery.fn.dataTableExt.oSort["meuValorSType-asc"] = function (x, y) {
// código aqui
}
Solução
Para ordenar de forma numérica, e mediante os valores apresentados no exemplo da pergunta, existem algumas considerações a tomar:
- Retirar o HTML
- Estar atento a números negativos
- Estar atento a valores vazios
A DataTables disponibiliza-nos dois parâmetros, em cima representados por x
e y
, cujos mesmos contém os valores das células:
console.log(x); // retorna: <span>? 54</span>54
Como temos HTML no valor da célula, e dentro desse HTML o mesmo valor visível na célula sobre o qual pretendemos realizar a ordenação, podemos passar o mesmo para um objeto:
console.log($(x)); // retorna: Object[span]
Onde depois fazendo uso do método .text()
do jQuery ficamos apenas com o seu conteúdo:
console.log($(x).text()); // retorna: ? 54
De seguida temos que remover o ?
e o espaço em branco onde para o efeito recorremos a uma expressão regular que visa deixar apenas dígitos e o sinal -
, expressão essa que usamos no método .replace()
de JavaScript que nos vai devolver apenas os valores que pretendemos preservar:
console.log($(x).text().replace(/[^0-9.-]/g, "")); // retorna: 54
Agora que temos o valor da célula, falta estar atento ao fato de ser vazio:
if (!meuValor) {
// está vazio, aplicar lógica adequada
}
Juntando tudo isto e aplicando ao parâmetro representado por x
e y
:
// instancia variáveis com X e Y apenas com o número na célula
var myX = $(x).text().replace(/[^0-9.-]/g, ""),
myY = $(y).text().replace(/[^0-9.-]/g, "");
// Se o X está vazio, atribui um valor negativo super elevado
// cujo mesmo sabemos nunca vir a ser utilizado nas células
if (!myX) myX = -9999999999999;
// Se o X está vazio, atribui um valor negativo super elevado
// cujo mesmo sabemos nunca vir a ser utilizado nas células
if (!myY) myY = -9999999999999;
Agora que temos a lógica pronta, podemos aplicar a mesma nas nossas funções personalizadas para ordenação:
/* Função para ordenação descendente para colunas com o sType="meuValorSType"'
*/
jQuery.fn.dataTableExt.oSort["meuValorSType-desc"] = function (x, y) {
var myX = $(x).text().replace(/[^0-9.-]/g, ""),
myY = $(y).text().replace(/[^0-9.-]/g, "");
if (!myX) myX = -9999999999999;
if (!myY) myY = -9999999999999;
// Devolve à DataTables o resultado de X-Y para ela saber qual o menor dos dois
return myX - myY;
};
/* Função para ordenação ascendente para colunas com o sType="meuValorSType"'
*/
jQuery.fn.dataTableExt.oSort["meuValorSType-asc"] = function (x, y) {
// Não precisamos repetir código, chamamos a ordenação descendente
// mas trocamos os valores de entrada.
return jQuery.fn.dataTableExt.oSort["meuValorSType-desc"](y, x);
}
Exemplo
Agora que vimos como resolver a questão, vamos aplicar isto tudo ao código presente na pergunta:
Exemplo também no JSFiddle.
jQuery.fn.dataTableExt.oSort["myNumeric-desc"] = function(x, y) {
var myX = $(x).text().replace(/[^0-9.-]/g, ""),
myY = $(y).text().replace(/[^0-9.-]/g, "");
if (!myX) myX = -9999999999999;
if (!myY) myY = -9999999999999;
return myX - myY;
};
jQuery.fn.dataTableExt.oSort["myNumeric-asc"] = function(x, y) {
return jQuery.fn.dataTableExt.oSort["myNumeric-desc"](y, x);
}
var oTable = $("#products").dataTable({
"aaData": [
[1, "Dinner", "<span>? 1</span>1"],
[2, "Study", "<span>? 54</span>54"],
[2, "Study", "<span>? -5</span>-5"],
[3, "Sleep", "<span>? 6</span>6"],
[4, "Sleep", "<span> ?</span>"],
[5, "Sleep", "<span>3 ?</span>3"],
[6, "Study", "<span>? 60</span>60"]
],
"aoColumns": [{
"sClass": "center",
"bSortable": false
}, {
"sClass": "center",
"bSortable": false
}, {
"sClass": "center",
"bSortable": true,
"sType": "myNumeric"
}]
});
tr.row_selected td {
background-color: red !important;
}
td > span {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="table_container">
<table id="products">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>quantity</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>