Datatables search filter - special characters with html data

iecwebmast

Hello,

I'm having some trouble initializing a Datatables search filter to ignore special characters. I'm using the technique from the datatables accent neutralise plugin.https://datatables.net/plug-ins/filtering/type-based/accent-neutralise

It works properly with string data, but not with html data in the table. My test case uses names with variations of the letter u (with or without an umlaut)... u, ü, U, Ü I would like for the filter to show results for the name "tuv", regardless of capitalization or the umlaut on u.

It works fine with string data: http://fiddle.jshell.net/lbriquet/gr00mx31/

But not with html data (hyperlink on a name): http://fiddle.jshell.net/lbriquet/kL5tf31b/

I've tried declaring the data as html instead of a string, but was not successful. Can anyone give me a hand with this?

iecwebmast

Hello,

I still haven't found a solution. Can anyone help me with this?
The accent neutralize plug works with data declared as "string", but not with html data. My data also includes html and declaring the data as a string causes the column sorting not work properly.

STRING example:
search for "tuv" finds all cases, regardless of accents... but "name" column sort is not functioning correctly.
http://jsfiddle.net/lbriquet/hdq8bLqn/

HTML example:
search for "tuv" finds only unaccented matches.. but "name" column sort functions correctly.
http://jsfiddle.net/lbriquet/cj2s501L/

I need both the accent neutralize search and the column sorting to work...

What can I do to fix this?

iecwebmast

Could this method be used?
https://datatables.net/plug-ins/filtering/type-based/html

It seems to be possible, I've got it working for one letter. How can I use it with list of multiple special characters?

Here is my test... it works for tuv, (showing variations of "u" with or without the umlaut), but not for sol (still does not show the variations of "o" with or with the umlaut).
https://jsfiddle.net/lbriquet/efvLfe63/

iecwebmast

I found a solution, by adapting the Datatables strip html plugin to replace a chain of special characters in the html.

The jQuery.fn.dataTable.ext.type.search.html method resolved the problems (see above) faced when tables contain html data that could not be resolved with the jQuery.fn.dataTable.ext.type.search.string method used in the Datatables accent neutralise plugin.

What do you think?
https://jsfiddle.net/lbriquet/xjzuahrt/1/

(function() {
  var _div = document.createElement('div');
  jQuery.fn.dataTable.ext.type.search.html = function(data) {
    _div.innerHTML = data;
    return _div.textContent ?
      _div.textContent
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n') :
      _div.innerText
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n');
  };
});

$(document).ready(function() {
  var oTable = $('#example').DataTable({
    "columnDefs": [{
      "type": "html",
      "targets": '_all'
    }]
  });
 // Remove accented character from search input as well
    $('#example_filter input[type=search]').keyup( function () {
        var table = $('#example').DataTable(); 
        table.search(
            jQuery.fn.DataTable.ext.type.search.html(this.value)
        ).draw();
    } );
});