Adding html to column cell

oristeph

Here is a link to jsfiddle

I'm attempting to add html to sit inside of my data table cell under a specific column. For example, in my first column "Highest Revenue" i'd like to show Walk ins 20% ( html div here)

The html I'm attemping to add is this called progress-bar and determinate-color these two divs will return back a bar-graph. I would like to add this inside of my column to sit right by the first results for "Highest Revenue".

My goal is to essential add a percentage bar graph within the cell of my datatable right beside the value 20%

i've attempted to accomplish this two different ways:

by using the render function inside of my columnDefs array and inside of a render fuction in the actual columns render function both having no affect to my table:

columnDefs : [ { targets : [1,2], render : function(data, type, row) { return '<div class="progress-bar"> <div class="determine-color" style="width:10%"> </div> </div>' } } ],

My expected outcome to be able to include my progress-bar div inside of my column cell to sit by the value percentage I am displaying on my table.

allan

You’ve got a columns.render function defined for column index 1 defined in both columnDefs and in columns. The later will always overwrite the former if both are defined.

Moveover, you have a typo in the rendering function in columns:

'<div cclass="progress-bar"> <div class="determine-color" style="width:10%"> </div> </div>'

Note the cclass.

Allan