Regexp Search fails if the cell has a link with a > in the title

derekwallace

Hi,
Ive uncovered a corner case problem in 1.10.5 DataTables.
I have cells formatted like this.

<td><a href='www.some.com' title='X &gt; 0'>MyText</a></td>

When performing a Regexp search there is a problem related to the > .
it seems to think its the end of the "a" element. therfore it regards what is after it as part of the text in
the cell i.e. it regards " 0'>" as part of the cell.

What this means is that searches like "^MyText" will not work.
But ^.+MyText" will work.

the following is the example to illustrate the problem.
http://jsfiddle.net/derekwallace/f89egx0c/

Derek

derekwallace

I also replicated the bug here.

I edited the "Tiger Nixon" cell to be a <span> and added a title with a > symbol.
it failed the same way.

http://live.datatables.net/hubozezu/1

allan

Really interesting one - thanks for posting this. Unfortunately at the moment I don't have a good answer other than to use Ajax...

The reason for this is that when DataTables reads the HTML back from the page, the browser is giving it an unescaped entity (thus it is actually invalid HTML!):

Consider the HTML from your example in a div:

<div id="test">
  <span title='yyyy &gt; 0'>Tiger Nixon</span>
</div>

Using document.getElementById('test').innerHTML gives: <span title='yyyy > 0'>Tiger Nixon</span>!

Likewise using $('#test').html() gives exactly the same result.

There is a discussion about this on SO.

The regex DataTables uses to strip out HTML from the filtering doesn't do matching brackets (i.e. ignore the > in the middle) which would probably be the best solution, but I've not been able to figure out a clean and efficient regex for how to do that.

If you used an Ajax of Javascript data source this wouldn't be an issue as the data wouldn't have to be read from innerHTML in the first place, so the encoding would remain as it was.

This definitely needs more thought!

Allan

derekwallace

Thanks for getting back.

derekwallace

Here is something to consider to strip the html elements leaving just the text.

I found this on SO.
http://stackoverflow.com/questions/5002111/javascript-how-to-strip-html-tags-from-string

I am using this code snippet to resolve an issue with natural column sorting.
a is the cell content.

var html       = a;
var div        = document.createElement("div");
div.innerHTML  = html;
a = div.textContent || div.innerText || "";

allan

The problem with that method is that is horrendously slow. Writing to a DOM element and then reading it back will utterly kill performance, even for medium sized tables on modern browsers.

I tried it a while back in a beta version to get the column widths absolutely perfect - it didn't make it to release...

Allan

derekwallace

Thx. You may have noticed another discussion i opened wrt natural sort.
Natural sort does not strip away the html tags so the sorting is fairly useless if cells have html tags.

As a workaround i added the above to natural.js for my internal site and seems to work with no noticeable performance penalty.

You may also notice that i identified another issue. When you use natural to sort columns, the filtering of columns does not strip the html tags.

Im a bit stuck now as i cant get regex filtering and column sorting to both work well. In general all my cells have html links.

Maybe Datatables needs builtin types natural and html-natural.

BTW, DataTables is absolutely brilliant!

allan

Thanks :-)

I've just posted back in your other thread.

Maybe Datatables needs builtin types natural and html-natural.

Not currently planned. I'm happy with the built in ordering options at the moment and don't currently have any plans to extend them.

Allan