Rendering html content in datatable

Question

I am loading server response in a datatable using js in a asp.net core razor page. Because the data/UI is complex, I need to render different layouts based on current value in each table cell.

Datatable supports a renderer function for each cell, so I could have something like:

...
"data":"somefield",
"renderer":function(data,type,row,meta){
       if (data.someId)=="someValue"{
          return "<div... some label with somValue</div>"
       }else{
           return "<div... some label without value</div>"
       }
    }
}

This works perfectly fine, however when divs get complex with style and many labels it becomes harder to maintain or change.

I did look a bit into Razor's PartialViews as it may seem like a good alternative. Having the UI in a cshtml file, being able to pass parameters from parent @Model and using c# in it to render it based on the parameter received.

While I am able to load the partial view in the parent page, using <partial name=''/> or @Html.Partial(...) I didn't manage to get it's content in js using $.get and return it in the datatable's render function. Probably async wouldn't work in this case? Or it would be too slow?

My question is: what would be a better way to handle this situation? Maybe partial views are not the way. I am looking for a way of easily maintaining/changing the cell content. Thank you for your time.

user1544428 · Accepted Answer · 2024-11-11 17:26:16Z

3

I'm going to leave this answer here because it's also possible to render an HTML element through the rowcallback function. I found the rowcallback function to be a little easier to work with than the column render function. However, if you don't do it correctly, it will just display the html element as a string. This will actually render an html element in a table column:

"rowCallback": function (row, data, index) {
                
                if (data['TicketType'] === "2") {
                    $('td:eq(3)', row).html('<img src=\"...">');

                }
                          
            },

Note: The "3" in the above code is the zero-based column number.

answered Nov 11, 2024 at 17:26

user1544428

1692 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

General Grievance Over a year ago

This is great. If you need to attach event listeners, you can attach them here instead of trying to set them in the render function.

mark_b · Accepted Answer · 2022-04-19 09:04:29Z

1

I'm not really familiar with asp.net but I will try to answer your question.

I don't think PartialViews are going to work in the way you suggest because they appear to be server-side code, and trying to do a GET request for every line in your table could potentially generate a large number of server requests.

I think you have a couple of potential solutions. First is to loop through your data on the server, and for each property that matches the condition generate the partial view and assign it to the property. Then return your data array with one of the properties in each row being a chunk of HTML. As I said, I don't have experience with this language so it's hard for me to provide a code example, but I hope you understand what I'm trying to say. Then in DataTables you just need to output the value

columns: [
    { data: 'someField' }
]

THe second option is to generate the HTML on the client using JavaScript. Since you say that it could be complex it's best if you have a function that returns a HTML string. If it's a large amount of HTML then you could even put this function in a separate file and export it, to make it more manageable. There are a couple of typos in your example, so I'm going to fix them here. Renderer is a table property, the one you want is columns.render. Also in the render function the data argument references the data property that is defined in the line above. If you want to reference a different property, use the row argument.

columns: [
    {
        data: 'someField',
        render: (data, type, row) => renderMyData(data, row)
    }
]

function renderMyData(data, row) {
    if (row.someId == "someValue") {
        return "<div...> some label with somValue</div>"
    } else {
        return "<div...> some label without value</div>"
    }
}

answered Apr 19, 2022 at 9:04

mark_b

1,49312 silver badges19 bronze badges

2 Comments

Alin Over a year ago

Thank you @mark_b for taking your time to answer me. Generating on server side is not a solution indeed. My actual issue with html strings returned from a function is that: 1. there is no intelisense in writing these strings. 2. are hard to update and syntax can easily break. Maybe there is a way of writing these that I am not aware of. Could you please share an example? Thank you.

mark_b Over a year ago

@Alin did you consider my first proposal, where you generate the HTML serverside using a loop before you return the data? That way you only need to make a single HTTP request.

Collectives™ on Stack Overflow

Rendering html content in datatable

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related