javascriptjquerydatatablesnon-ascii-charactersaccent-insensitive

jQuery DataTables - Accent-Insensitive Alphabetization and Searching


When using jQuery DataTables is it possible to do accent-insensitive searches when using the filter? For instance, when I put the 'e' character, I'd like to search every word with 'e' or 'é', 'è'.

Something that came to mind is normalizing the strings and putting them into a separate, hidden column but that wouldn't solve the alphabetizing issue.

EDIT

I tried the following:

$.fn.dataTableExt.ofnSearch = function ( data ) {
return ! data ?
    '' :
    typeof data === 'string' ?
        data
            .replace( /\n/g, ' ' )
            .replace( /á/g, 'a' )
            .replace( /é/g, 'e' )
            .replace( /í/g, 'i' )
            .replace( /ó/g, 'o' )
            .replace( /ú/g, 'u' )
            .replace( /ê/g, 'e' )
            .replace( /î/g, 'i' )
            .replace( /ô/g, 'o' )
            .replace( /è/g, 'e' )
            .replace( /ï/g, 'i' )
            .replace( /ü/g, 'u' )
            .replace( /ç/g, 'c' ) :
        data;
};

JS File Gist


Solution

  • You are so close in your edit, what you have tried, except that you lack the must important thing : Defining the "scope" or sType of your filter plugin. The function is never called, right? This is because the plugin is not associated with a sType.

    To get your code to work simply declare the plugin like this :

    $.fn.dataTableExt.ofnSearch['string'] = function ( data ) {
    return ! data ?
        '' :
        typeof data === 'string' ?
    ..
    ..
    }
    

    See this fiddle -> http://jsfiddle.net/Y5ycM/ I have turned some "Internet Explorer" columns into "Internet éxplorer", some "Opera" to "öpera" etc, Try search for ex or op.


    See https://datatables.net/development/filtering, section "Type based column filtering " :

    When you assign the sType for a column (or have it automatically detected for you by DataTables or a type detection plug-in), you will typically be using this for custom sorting, but it can also be used to provide custom filtering options. This is done by adding functions to the the object with a parameter name which matches the sType for that target column:

    I guess there here is a typo or oversight in the documentation, it says

    $.fn.dataTableExt.ofnSearch but should correctly be $.fn.dataTableExt.ofnSearch[sType], as the example just after clearly points out.


    Update. Allan Jardine confirms this is a bug in 1.9.4 here :

    Yup - bug in 1.9.4. 1.9.4 broke this part of the code unfortunately. It also effects the removal of HTML tags from the filter, since that was using the same mechanism. It is fixed in the 1.10 betas though.