Are there any example to custom render a row?

patchthecode

I've looked at a number of questions in the forums but do not know how to custom render a row.
Our table is set to serverSide and ajax.

table looks like this

The last cell is a progressbar made up of number of divs.
Is there a way, that when the data gets received from the server i can hook into the creation of the row to setup my Divs etc?

right now our table code looks like this:

$(document).ready(function() {
    $('#()dataTables-example').DataTable({
        "order":[],
        responsive: true,
        "serverSide": true,
        "ajax": "/dataTableInfo",
         createdRow: function( row, data, dataIndex ) {
         $(row).html('<tr class="odd gradeX"><td style="vertical-align:middle;" class="col-md-2"><b>data[0]</b></td><td style="vertical-align:middle;" class="col-md-2">data[1]</td><td style="vertical-align:middle;">data[2]</td><td style="vertical-align:middle;"><a href="testResults/#(result.suiteID)">data[3]</a></td></tr">')
         }
    });
});

but im pretty sure we may be doing something wrong?
Any help is appreciated. Thanks.

colin

Hi,

There's a few ways to go with this. You can have a callback for when the row is created (like this), or you can render the column in a specific way (like this).

Hope that helps, please let us know which way you decide to go!

Cheers,

Colin

patchthecode

Thanks for responding Colin, in the example code I have posted above, You can see that im trying your suggestion #1 using the created row callback.

Can you let me how how to correctly set the properties of the row(tr) and the properties of the cell (td) ?

In my badly coded example above, I am trying set the row's class to ->
class="odd gradeX"

and I am trying to set some styles to the cell and classes with divs to the cell.

But I do not think I am doing it correctly as it is not rendering correctly. It the code I pasted above looking good or bad...?

kthorngren

Updating the row's html directly in createdRow is not expected way to use this function. Take a closer look at the example Colin pointed you to.

In addition you might want to look at columns.createdCell and columns.render. They will allow you to set the styles and render HTML into the cells. The docs have examples. Plus I put together this example for you:
http://live.datatables.net/cezewiqe/1/edit

Give it a shot and let us know if there are any questions. Maybe you can build a test case or update the example with your code if you have questions.

Kevin

patchthecode

sorry it took me a while to get back to this. Im back at work from now.
Your example is very helpful. I just have one last question. How do i add a class to a specific column (from your example code)

EDIT -- never mind, i just found out. Thanks!!

patchthecode

There is just one last thing. In the original question i asked if i can have a cell containing not just text, but the cell should be contain a divs that has a progress bar.
Using your example i am able to change text etc well, but is it possible to create a div in that cell? (im not sure if im asking the question correctly. the sample image i posted above seems to have been removed). Or is this done with the render part?

Joyrex

You should be able to put any HTML in the cell using render and example provided (creating an HREF) is exactly that.

You could use the numeric value of a cell in the render to set the value of a progress bar (e.g., 65 could be 65% of 100% on the progress bar) using the HTML5 <progress> element: https://w3schools.com/tags/tag_progress.asp

In fact, it was so easy, I modified the example provided (note the age column is now a progress bar): http://live.datatables.net/cezewiqe/6/