scorpions78
scorpions78

Reputation: 558

Add style cell to DataTable from database

I´m trying to add style to my cell according to status of call.

One call can have one of these statuses:

And this style it´s in table from DB in columns:

span_class and class with this content:

span_class: badge bg-primary text-white
class: badge bg-primary text-white

for example.

I want to add this styles to my column status in my datatable.

i think that i can to do this in columns with render, but i don´t know how i can to do this.

my columns is:

columns: [
  { data: '', name: '' },
  { data: 'identi', name: 'identi' },
  { data: 'nombre', name: 'nombre' },
  { data: 'direccion', name: 'direccion' },
  { data: 'provincia', name: 'provincia' },
  { data: 'ciudad', name: 'ciudad' },
  { data: 'teleoperadora', name: 'teleoperadora' },
  { data: 'reasignar', name:'reasignar', 'render': function ( data, type, row ) {
      return "<select class='select_operator'><option>-- Seleccione --</option></select>";
  },       
  },
  { data: 'estado', name: 'estado' },
  { data: 'estadoCita', name: 'estadoCita' },
  { data: 'fechaAsignacion', render: function (data, type, row) {
      return moment(new Date(data).toString()).format('DD-MM-YYYY HH:mm:ss');
  } 
  },
  { data: 'action', name: 'action', orderable: false, searchable: false },
],

in "estado"(status) i need add class

updated

I´m trying this:

{
  data: 'estado',
  render: function(data, type, row) {
    return '<span class="' + data.clase + '">' + data.estado + '</span>';
  }
},

updated

{
  data: 'estado',
  render: function(data, type, row) {
    return '<span class="' + row.class_span + " " + row.clase + '">' + row.estado + '</span>';
  }
},

Upvotes: 0

Views: 1162

Answers (1)

scorpions78
scorpions78

Reputation: 558

this resolve my problem. I have one JSON in my query in controller and return value css that i need. after i put class into my td with:

{ data: 'estado', render: function (data, type, row) {
                return '<span class="'+row.class_span+" "+row.clase +'">' + row.estado + '</span>';
                } 
            },

Upvotes: 1

Related Questions