AJAX data showing unformatted HTML

mrsearing-all

I have used DataTables to displayed DOM sourced HTML-formatted data and it works as expected. List items display as a list, etc.

However, when I have an AJAX source, the data is being displayed with the HTML tags instead of formatting as expected.

data: [{DT_RowID: "row_1", etc.}]
     0: {DT_rowID: "row_1", etc.} 
Items:"<ul><li><strong>None</strong></li><li>Some</li><li>More</li><li>Less</li></ul>"

I expect it to be formatted in the cell like this:

And inspecting the element shows:

<td><ul><li><strong>None</strong></li><li>Some</li><li>More</li><li>Less</li></ul></td>

And this is what the page actually displays:

How do I have DataTables show the formatted HTML?

kthorngren

You are using character entities, ie < which tell the browser to display that character instead of interpreting as HTML. See this doc:
https://developer.mozilla.org/en-US/docs/Glossary/Entity

Your data will need to look like the second code snippet. You can use columns.render to replace the entities (<) with the HTML character (<).

Kevin

mrsearing-all

Thanks for the response! This is how the data is stored in the database. I had looked at replacing entities but there are so many different possibilties that it would become unwieldy to do that for each column.

I did end up rendering it correctly with this:

columns:[
{
    data: "Items",
    render: function (data, type, row) {
        return $('<div/>').html(row.Items).text();
    },
    autowidth: true
}]

kthorngren

Thats a good solution, much easier than trying to replace the entities

Kevin

allan

The only issue is that it is slow. If you have a large data set, you'll notice a performance impact due to the DOM operations. String replacement is much faster, but also inherently less complete. If your data set allows for this approach - use it

Allan