How to apply style in Ajax Datatables

mactech

I just purchased the latest Porto Admin template which includes dataTables. When adding data using html I can apply styles to a column and add an Action hover but cannot determine how to do this when populating the data using ajax.

Are there any examples?

Thanks

mactech

It appears this is not possible as I cannot find any mention or examples. Every column is flush-left, including numbers. I did find a method to place a button in a column, but that is not very desirable.

Can any confirm this?

mrd05d

Can you explain better what you are trying to do or show an example of what you are trying to do? Im not completely clear on what action hover or styles you need to add to a column.

Also are you trying to style the td elements or the entire column?

tangerine

I have no idea what styles are or are not applied by the Porto Admin template, but it should be a simple matter for you to find out..

Meanwhile, DataTables own styling is extensively covered in the documentation:
http://datatables.net/examples/styling/index.html

mrd05d

Also in the DataTables documentation it shows how to add classes to rows and columns here: http://datatables.net/examples/api/highlight.html

This adds a class of highlight but really you could change that to a different class and style to your own needs.

If you need to style the actual td elements you will likely have to do that in a created cell callback function. This is in the documentation and can be found here:
https://datatables.net/reference/option/columns.createdCell

Again this adds a css color red to the td. You could just as easily add a class and stylize appropriately via css.

mactech

Format a dataTable column to right justify when displaying a number for example.

I can do this with table-default and filling rows using html but not with an ajax table.

mrd05d

You can use columnDefs to add a class to column and then stylize in css. I have shown this here:
http://live.datatables.net/vacexayo/1/

mactech

I will try the columnDefs for style. Thanks.

The other need is to do the same for an action column

mrd05d

For that you would look at columns.createdCell that i posted above and give the td a class of actions. That is what the template looks like it is using.

<td class="actions">
...
</td>

mactech

That is the html that I use now for the column. Glad this can be accomplished and it would be great to see examples of it.

Thanks Allan for a great product.