2

Preciso que cada célula da primeira coluna do datatable mude de cor conforme a tabela seja dimensionada. A cor será definida conforme os dados da tabela são gerados no back-end.

Segue abaixo um exemplo de como preciso:

Exemplo

Na borda esquerda da primeira coluna preciso definir cores diferentes para cada dado. Esta cor sera definida como explicado antes.

Segue como estou chamando a datatable:

 var st = $('#search_type').val();
 table = $('#ticket-table').DataTable({
  "dom" : "<'row'<'col-sm-12'tr>>" +
  "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  "processing": true,
  "pagingType" : "full_numbers",
  "pageLength" : 15,
  "serverSide": false,
  "orderMulti": false,
  responsive: true,
  ordering: true,
  search:{
  smart: false,
  regex: true},
  order: [
  [5, 'asc'],
  [12, 'desc']
  ],
  columnDefs: [
  {
    'checkboxes': {
     'selectRow': true,
     selectAllPages: false,
   },
   'targets': [ 0 ],
   "render": function ( data, type, row, meta ) {
    return "<input type='checkbox' class='dt-checkboxes' name='selected_tickets' value='"+data+"'>";
  },
  orderable: false,
  "searchable": false
},
  { 
    className: "vertical-align-column nowrap-column", "targets": [0,1,2,11] 
  },
  { 
    className: 'vertical-align-column nowrap-column text-center', "targets": [3,4,5,6,7,8,9,10,13] 
  },
  { "targets": [2, 6], render: $.fn.dataTable.render.ellipsis( 20 , true, true) },
  { 
    "targets": [ 5, 8, 10, 12],
    "visible": false,
    "searchable": true
  },
  {
    orderData: 5,
    targets: [12]
  },
  { 
    "targets": [ 7 ],
    "orderable": false },
    { 
      "targets": [ 9 ],
      "orderable": false },
      { 
        "targets": [ 13 ],
        "orderable": false
      },
      { 
        "targets": [ 11 ],
        "orderable": false
      }
      ],

      'select': {
       'style': 'multi',
       'selector': 'td:first-child'
     }, 
     "language": {
      "sEmptyTable": "Nenhum registro encontrado",
      "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
      "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
      "sInfoFiltered": "(Filtrados de _MAX_ registros)",
      "sInfoPostFix": "",
      "sInfoThousands": ".",
      "sLengthMenu": "Mostrar _MENU_ resultados por página",
      "sLoadingRecords": "Carregando...",
      "sProcessing": "Processando...",
      "sZeroRecords": "Nenhum registro encontrado",
      "sSearch": "Pesquisar: ",
      "oPaginate": {
        "sNext": "Próximo",
        "sPrevious": "Anterior",
        "sFirst": "Primeiro",
        "sLast": "Último"
      },
      "oAria": {
        "sSortAscending": ": Ordenar colunas de forma ascendente",
        "sSortDescending": ": Ordenar colunas de forma descendente"
      },
      buttons: {
        copy: 'Copiar',
        print: 'Imprimir',
        copyTitle: 'Copiado para área de transferência',
        copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i>  para copiar os dados da tabela para a área de transferência. <br><br>Para cancelar, clique sobre esta mensagem ou pressione Esc.',
        copySuccess: {
          _: '%d linhas copiadas',
          1: '1 linha copiada'
        }
      },
      select: {
        rows: {
          _: "%d linhas selecionadas",
          0: "",
          1: "Uma linha selecionada"
        }
      }
    },
    "ajax": {
      url : "<?php echo site_url("tick/tickpage/" . $page . "/" . $catid. "/" . $statusid. "/" . $situation. "/" . $date) ?>",
      type : 'GET',
      data : function ( d ) {
      }
    },
    "drawCallback": function(settings, json) {
      $('[data-toggle="tooltip"]').tooltip();
    }
  });
 $('#form-search-input').on('keyup change', function () {
  search_column = $('#search_type').val();
  if (search_column == 0) {
    table.search(this.value).draw();
  }else{
    table.columns(search_column).search(this.value).draw();
  }
});
4
  • Coloque seu ocódigo, o que ja tentou
    – Costamilam
    Commented 31/03/2018 às 3:04
  • @GuilhermeCostamilam Então, na verdade não consegui encontrar nada na documentação que fizesse isso, tenho uma tabela comum do datatable. Commented 31/03/2018 às 12:34
  • coloque um trecho do seu código para podermos ajudar Commented 31/03/2018 às 12:48
  • @HebertdeLima Editei a pergunta Commented 31/03/2018 às 12:54

1 Resposta 1

1

Consegui a solução adicionando dentro de columnDefs:

columnDefs: [
  { targets: 0,
   createdCell: function (td, cellData, rowData, row, col){
    $(td).css('border-radius', '4px');
    $(td).css('border-left', '4px solid '+rowData[14]);
  }
}]

O código acima recebe a cor vinda da coluna numero 14 que está oculta e adiciona na primeira coluna o style que precisava.

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 .