Datatables does not display < character

mwhouser

I am using Datatables in a server-side scenario. I am returning the following as part of my JSON data: "A\u003cB" which basically is "A

mwhouser

Just tried 1.9.1 and I have the same problem.

allan

The problem is that Javascript is trying to use the code \u003cB rather than \u003c with a 'B' added onto the end. One option is to use HTML entities: < in this case since this is properly terminated. The other would be to break the string it to its component parts. I'm not sure how Javascript is meant to deal with your string (I'll have a scan through the spec later), but it it needs some way of separating the character code from the remainder of the string.

Allan

mwhouser

The string "A\u003cQ" ( AB ) is OK.

You know better, but I don't think it's a hex parsing thing. Seems that it's specific to the < character. Could something think it's the start of an HTML tag?

allan

By experimentation:

> document.body.innerHTML = 'A\u003cQ'

Results in just A in the document's body

> document.body.innerHTML = 'A\u003cQ>'

Results in A followed by a Q tag

> document.body.innerHTML = 'A\u003c Q'

Results in "A< Q"

So I think the HTML parser of the browser is reacting to the "<" as an HTML tag - which is it, and since DataTables write tint the elements using HTML, if you wanted to use HTML entities such as "<" they would need to be escaped (i.e. "<").

Allan

mwhouser

Thanks, encoding the < and > worked.

Can this be handled by datatables in the future?

From a MVC point of view, this should be the duty of the table, no? The AJAX call from the server should return pure data, not view data. It should be the responsibility of the view to ensure the data is presented properly.

allan

> From a MVC point of view, this should be the duty of the table, no?

Possibly - but at the same time, I'd say that if you pass DataTables a string, you would expect it to show it without alteration. If it did alter data, that could lead to some very confusing and horrible bugs. As such, I won't be implementing that change in the near future, but I've certainly always open to changing that opinion :-)

Allan

mwhouser

[quote]
Possibly - but at the same time, I'd say that if you pass DataTables a string, you would expect it to show it without alteration.
[/quote]

That's exactly it. If I pass "A

allan

What if you were to pass:

> hello

would you expect to see "hello" in italics, or the raw string? It sounds like you are expecting the latter, while I think most would expect the former. You need to be aware that you are passing in HTML, sure, and the escaping might well be required, but there are many cases (probably more) where it useful to not escape the HTML.

Allan

mwhouser

I agree with you and disagree at the same time.

When I construct a table using html markup, and apply .datatables() on it, I would expect exactly as you describe. That's because my data was already marked up in the table as appropriate.

I guess my issue is with tables populated from json data.

[quote]You need to be aware that you are passing in HTML[/quote]

A json data source is exactly that, a data source. It may have many uses, some of which is for HTML visualization, some not.

If I passed hello in my json data, that (a) assumes my data is for an HTML view, and (b) restricts my data to be used by an HTML view.

I concede that this matter is not a bug, and is the correct behaviour of the control. However, a future feature request would be a flag to say "this data source is data, not html" because I can use the "fnRender" column member to transform my data into html should I need it.

allan

The key thing to remember is that DataTables is an HTML table enhancer - the closer I can make DataTables to being like working with an HTML table - while providing complete control over it, the more I will be reaching my goal (plus, the best possible documentation etc - but I'm sure you get the point :-) ).

So knowing that you are working with HTML, the data that you are putting into the table will be treated like HTML, I think is important. If you want it escaped, then, just like any other HTML control, the data needs to be escaped.

A flag is certainly an option and I'll add it to my list as see how many other requests there are for something similar before adding any code to the core.

Thanks for the feedback!

Allan

Nicklepedde

Could this not be solved with (something like):
[code]
"aoColumnDefs": [
{
"fnRender": function ( o, val ) {
return String(val)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(//g, '>');

},
"aTargets": [ 0,1,2,3,4,5 ]
}
]

[/code]

mwhouser

[quote]The key thing to remember is that DataTables is an HTML table enhancer - the closer I can make DataTables to being like working with an HTML table - while providing complete control over it, the more I will be reaching my goal (plus, the best possible documentation etc - but I'm sure you get the point :-) ).

So knowing that you are working with HTML, the data that you are putting into the table will be treated like HTML, I think is important. If you want it escaped, then, just like any other HTML control, the data needs to be escaped.
[/quote]

Acknowledged.

[quote]Could this not be solved with (something like): [snip] [/quote]

(I have not tried it, but) Yes, that should help as a view-side remedy.

alanf

I'm new to data tables, but I would agree that it would be really handy to have aoColumnDefs or aoColumns attribute that could say, "Html escape this." I can do it on the server side, but it does seem that the closer that is to the original data, the better. I also see more than one way to take care of it on the client side, but it does mean a good amount of coding for a common need. Now, DataTables is far more powerful, but it seems that for a simple, common circumstance it would be more efficient to have DataTables handle it. (I also suspect you could code it to work faster within the library than will be when I add the necessary calls.) I also think you could readily handle the issues of setting, versus displaying, versus sorting, versus filtering in a solution.

Either way, great resource...so I'm glad to use it whether I have to jump through some hoops or not. :-)

P.S. As someone replacing Spry, it allowed you to define what a column was and did something automatic like this unless you specifically said it was HTML. If you do implement this, it might be good to have an overall DataTable setting that says to escape everything unless a column is marked as including HTML.

allan

You could use something simple like this to display HTML data raw in the table:

[code]
mRender: function ( data, type, row ) {
return data.replace(/&/g,'&').replace(//g,'>') ;
}
[/code]

Allan