Conditional Styling

sgt_bear

I have taken a look at DataTables and would like to use it for my next project, a ticket system. But i would need a conditional formatting.

1.) Display a color field or icon based on a value of the cell (like 1 would result in red, and 2 would result in blue)
2.) Make text bold based on a value (like "bold" would result in a bold text)
3.) Hyperlinks. All cells should always be a link to a specific target.

Is this possible and where can i find documentation about this?

bindrid

The columns definition allows you to add your own classes as you see fit.
It also has a column render feature to let you build the hyperlinks
And if that is not enough, It has a row created call back feature that lets you do finishing touches to the row html.

here is the starting point https://datatables.net/reference/option/columns

HPB

It seems like you want to use columns.render

By passing it a function you can evaluate the data and display want you want.

Example code to display a download link:

"columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]

sgt_bear

Thanks for the quick answer

I forgot to say that my data comes from PHP/MYSQL, currently use the example from the ServerSide example. Is it still possible with that?

tangerine

Yes.

sgt_bear

I looked at the columns command, but how do i get the data of the field to the class?

bindrid

on this example https://datatables.net/examples/server_side/object_data.html ,
notice that the columns: data field match the data on the ajax tab. So to add your class to the position field you would simply change { "data"String: "position"}, to { "data"String: "position", className:"MySpecialClass"},

sgt_bear

I think its unclear what i wanna do, my plan would be like this
Here is an example on doing it on php:

<?php
$var = "red"
if ($var == "red"){
$style = "myRedClass";
}
else
{
$style = "myGreenClass";
}

<?php > ?>

<td class="<?php echo $style;?>">Some content</td>

And this for every row. Can this be done with data tables

allan

You can't set the cell's class with the columns.render function as the function might be called before the cell has even been created (in the case of deferRender).

But you can do it with columns.createdCell and yes, you can use that to set the class based on the logic you require.

If it needs to be dynamic (i.e. the data in the cell might change during the life time of the table) use rowCallback to modify the row / cells.

Allan