Regex search and Natural Sort of columns does not work

derekwallace

Hi,
Here is example.
http://live.datatables.net/lupufuci/2/

Cells have hyper links in them
<a href='aaa'>Tiger Nixon</a>

Default DataTable configuration works fine.
- in this case i suspect DataTable strips away the html tags to leave the text.
The regular expression ^T will match.

  // Works as expected. Search for "^A"
   var table = $('#example').DataTable({
     'search' : {'regex': true}
   });

If you now change the columns to use natural sort, the above will not work.
- in this case i suspect because the type is set differently, it does nto strip away the html tag.
- this feels like a bug.

  // Does not work expected. Search for "^A"
  var table = $('#example').DataTable({
    'search'      : {'regex': true},
    'columnDefs'  : [{ type: 'natural', targets: '_all' }
                      ]      
  });

allan

The natural sort plug-in looks like it would need to be modified to strip HTML if that it what you want. Probably best to do it before passing it into naturalSort() method.

Pull requests welcome if you make the change :-)

Allan

derekwallace

I updated my natural.js to strip the html tags before performing the sort.
Added this code to the natural.js in the function naturalSort.
It works really well in my cases and doesnt seem to be a performance problem.

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

The issue i now have is that regex search (or plain serarch) of the columns doesnt work well.
Because the type is set to "natural" i think DataTable does not "strip" the html tags before performing the filtering. Therefore filtering is looking at the html tags/attributes etc.

Column regex filtering is completely broken. Is there a workaround for this?
Is there some function you can call to pre-process things to strip the html tags before the filtering is applied to the column?

Thx
derek

allan

There are a number of ways of doing it, such as orthogonal data, but possibly the most direct way in this case is to add another filter pre-processor for the natural type:

$.fn.dataTable.ext.type.search.natural = function ( data ) {
  // Magic code form above to strip HTML. You should also remove \n characters!
};

edit It is a fairly under used feature of DataTables that ability - so nice to see it being used here :-)

Allan

derekwallace

Hi Allan,
Added this to the natural.js. Works beautifully.
Now column ordering and searching works correctly with type natural .

Thx for the help.
Derek

$.fn.dataTable.ext.type.search.natural = function ( data ) {
   var div        = document.createElement("div");
   div.innerHTML  = data;
   data           = div.textContent || div.innerText || "";
   return data;
};

allan

Nice one :-)

Allan

ma_roberge

Derek, Allan,

Should I understand that, in order to achieve the desired goal, one needs to run a local copy of natural.js rather than calling the Content Delivery Network? This must be what makes it possible to add your six lines of code. However, you would do me a great service (as a beginner in JavaScript) if you told me exactly where to add said lines in the file at http://cdn.datatables.net/plug-ins/1.10.7/sorting/natural.js. My problem is that the presence of attributes such as <b></b> prevents natural.js from working perfectly. Thanks in advance.

allan

The code above from @derekwallace is for a search plug-in, not a sort plug-in like the one you linked to.

So yes, you would need to have the above code locally if you wanted it as it isn't on the CDN at the moment.

Allan

ma_roberge

I have copied the contents of the natural.js file to my site plugin and linked to its location rather than using the Content Delivery Network; this is now OK. From what I understand of Derek's posts, he added the six lines of code from his post of April 8 somewhere in the natural.js file and reported that "column ordering and searching works correctly".

I have tried inserting said lines in various places in natural.js but, due to my inexperience with JavaScript, have not yet found the correct location. It would be nice if Derek happened to read this thread and were able to provide the answer that would force the plugin to disregard HTML codes when sorting. Thanks in advance.