3

No meu sistema tenho uma tabela montada pelo DataTables. Os dados são recebido do servidor via Ajax.

Exemplo da estrutura de dados carregados na tabela:

DDD           | Processados           | Aprovados           | Percentual           |

11 - 19        | 2.660                        | 574                      | 21.58%                 |

21 - 28        | 2.249                        | 298                      | 13.25%                 |




E a forma que estou usando os parâmetros de configuração:

var oTable = $('#tblList').dataTable({
        "aaData": dtData,
        "bFilter": true,
        "bInfo": true,
        "bStateSave": false,
        "oLanguage": {
            "sUrl": "pt.txt"
        },
        "bJQueryUI": true,
        "bProcessing": true,
        "bDestroy": true,
        "bPaginate": true,
        "bLengthChange": false,
        "sPaginationType": "full",
        "aLengthMenu": [[10], [10]],
        "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
        "bAutoWidth": false,
        "aoColumns": [{ "sWidth": "50%" }, { "sWidth": "15%" }, { "sWidth": "15%" }, { "sWidth": "20%" }],
        "aoColumnDefs":
        [{ "sTitle": "DDD", "bSortable": true, "sName": "ddd", "aTargets": [0] },
         { "sTitle": "Processados", "bSortable": true, "sName": "Processados", "aTargets": [1] },
         { "sTitle": "Aprovados", "bSortable": true, "sName": "Aprovados", "aTargets": [2] },
         { "sTitle": "Percentual de Aprovação", "bSortable": true, "sName": "Percentual de Aprovação", "aTargets": [3] }]
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Preciso de saber alguma forma para destacar a linha que tem o maior percentual, no caso aqui (21.58%). Usando um cor de background, ou cor do texto, fonte, etc.

2
  • Não entendi muito bem o que você esta querendo, você quer destacar a cor na classe DataTable? ou em algum grid ? Commented 5/09/2016 às 20:37
  • Eu quero destacar a linha do DataTable. Usando alguma função ou configuração do plugin datatable datatables.net Commented 5/09/2016 às 21:02

3 Respostas 3

1

Você pode percorrer a tabela inteira procurando o maior valor e destacar ele.

Mais ou menos assim:

maiorValor = primeiroValorTabela;
$(tabela).each(function(i) {
    var valorAtual = $(this).val();
    if (valorAtual > maiorValor) {
        maiorValor = valorAtual;
    }
});

Depois você adiciona a classe para destacar

$(maiorValor).addClass('destaque');

Css:

td.destaque {
    background-color: yellow !important;
}

Obs.: Esse código acima não funciona, é só um "esboço" para você ter uma ideia.

1
+50

Você pode fazer um código javascript para resolver o problema:

// Instanciando a tabela
$(document).ready(function() {
  var tabela = $('#exemplo').DataTable( {
   "order": [[ 5, "desc" ]] // Esta linha apenas ordena a tabela pela coluna 5
} );

var max = maxValue(table);

// Verificando quais colunas tem o valor mais alto encontrado
var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
  return table.cell( rowIdx, 5 ).data() === max ? true : false;
} );

// Adicionando o estilo CSS a linha
table.rows( indexes )
    .nodes()
    .to$()
    .addClass('destaque');
} );

// Função para pegar o valor máximo usando o método Sort da API
function maxValue(table, indice) {
    var valArray = table.column(indice)
                               .data()
                               .sort();
    return valArray[0];
}

O estilo CSS você pode criar da forma que preferir, eu fiz um bem simples:

<style type="text/css" class="init">
  .destaque{
    color:red;
  }
</style>

Se houverem colunas com o mesmo valor máximo ambas serão destacadas

1

Você pode percorrer todas as linhas da tabela com a função fnRowCallback, armazenar os valores em uma array, depois filtrar o maior valor e destacar a linha, veja o exemplo abaixo:

//Array para armazenar todos os valores da coluna
var vals  = [];
$('#tblList').dataTable({
//função percorre todas as linhas antes de renderizar
fnRowCallback:function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
  var val = parseFloat(aData[3]); // transforma texto da terceira coluna em float
  vals[iDisplayIndex] = val;//coloca no Array
  $(nRow).data('max',val);//Define o atributo data de cada linha
}
});
//Filtra o maior valor do Array
var max = vals.reduce(function(a,b){
  return Math.max(a,b);
});
/*
* Percorre todas as linhas da tabela
* comparando se o atributo data da linha é igual
* ao valor máximo e destaca a linha, neste caso se
* houverem valores iguais todas as linhas serão destacadas
*/
$('#tblList tbody tr').each(function(){
  if($(this).data('max') == max){
     $(this).children('td').css('background-color','yellow');
  }
});
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>


<table id="tblList">
<thead>
  <tr>
    <th>DDD</th>
    <th>Processadores</th>
    <th>Aprovados</th>
    <th>Percentual</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>11 - 19</td>
    <td>2.660</td>
    <td>574</td>
    <td>21.58%</td>
  </tr>
   <tr>
    <td>11 - 19</td>
    <td>2.660</td>
    <td>574</td>
    <td>21.59%</td>
  </tr>
  
  <tr>
    <td>21 - 28</td>
    <td>2.249</td>
    <td>298</td>
    <td>13.25%</td>
  </tr>
 <tr>
    <td>21 - 28</td>
    <td>2.249</td>
    <td>298</td>
    <td>21.59%</td>
  </tr>
  
</tbody>
</table>

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 .