I need to change the border color of a cell in the datatable

2

I need every cell in the first column of the datatable to change color as the table is scaled. The color will be set as the table data is generated in the backend.

Here is an example of how I need to:

OntheleftedgeofthefirstcolumnIneedtodefinedifferentcolorsforeachdie.Thiscolorwillbedefinedasexplainedabove.

Here'showI'mcallingthedatatable:

varst=$('#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();
  }
});
    
asked by anonymous 31.03.2018 / 03:03

1 answer

1

I got the solution by adding within columnDefs :

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

The code above gets the color coming from column number 14 that is hidden and adds the style you needed in the first column.

    
01.04.2018 / 15:51