4

Fazendo uso da jQuery DataTables, podemos indicar o tipo de ordenação pretendida:

$('#example').dataTable( {
  "aoColumnDefs": [
    { "sType": "numeric", "aTargets": [ 0 ] }
  ]
});

Mas se estiver presente HTML, escondido ou não, a ordenação do tipo numeric deixa de funcionar:

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": "numeric"
  }]
});
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>

Demonstração do problema também no JSFiddle.

O problema aqui é que a <span/> escondida é necessária para fornecer funcionalidades adicionais na tabela, mas a mesma não pode estar a obstruir a ordenação dos dados presentes em cada coluna.

Pergunta

Como proceder a uma ordenação numérica numa coluna cujas células contém HTML escondido ?

0

1 Resposta 1

4

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .