Problem with jQuery Tablesorter custom-filter having accented characters and special config

Question

I'm facing issue with custom filter defined when they :

1. have accented characters
2. textExtraction defined (to set usage of data-sort-value attribute i/o node text)
3. sortLocalCompare is set to true

Steps to reproduce

In column named '2' (I'm using flaticon in my app), select option "Modéré" or ">= Modéré"

Observed result

The filters doesn't find any result => the table is empty

Expected result

It should find :

• 1 row (when using option "Modéré") OR
• 2 rows (when using option ">= Modéré" as "Sérieux" is greater than "Modéré")

Please find the link with the described situation. When I changed either:

1. sortLocalCompare:false
2. comment/remove the textExtraction attribute definition Both case, one of them is enough, make things working.

Of course, both option to remove doesn't satisfy me as workaround. Because:

1. Option 1: sortLocalCompare:false when we sort by second column "Société", the company "Bâloise" is then sorted AFTER "BVZ Holding" which is due to the "â".
2. Option 2: I need the textExtraction function defined as I set integer values to make logic working with ">= Modéré" or also to add multiple integer separated by semicolumn to handle multiple themes to an element (and to have a custom filter listing all themes once)

I tried to make the example as short and comprehensive as possible. This table can be generated in 3 languages (My app is in english, french, german) and the filters are applied with CSS class name to be used in multiple tables accross the application like I do.

Here is the short version of my generic config (multiple tables using it) :

$(function() {
  $(".tablesorter").tablesorter({
    theme: 'blue',
    sortLocaleCompare: true,
    widgets: ["filter"],
    textExtraction: textExtractionDataSortValue,
    filter_onlyAvail: 'filter-onlyAvail',
    widgetOptions: {
      filter_functions: {
        '.filter-controversy': filterControversy,
      }
    }
  });
});

The custom filter function (generated either with english, french or german depending on the user's language):

var filterControversy = {
  'Aucun': function(e, n) {  
  console.info(e + " n=" + n);
    return e == '';
  },
  'Modéré': function(e, n) {
  console.info(e + " n=" + n);
    return e == 101;
  },
  ' >=Modéré': function(e, n) {
  console.info(e + " n=" + n);
    return e >= 101;
  },
  'Serieux': function(e, n) {
  console.info(e + " n=" + n);
    return e == 102;
  },
  ' >=Sérieux': function(e, n) {
    return e >= 102;
  },
  'Sévère': function(e, n) {
    return e == 106;
  },
  'Majeur': function(e, n) {
  console.info(e + " n=" + n);
    return e == 103;
  },
  'Tous': function(e, n) {
    return e != '';
  }
}

Thanks for your help

Tablesorter version : 2.31.3 (latest)

Answer 1

So you are correct about the behavior of the sortLocaleCompare causing the problem. What is happening is the filter function name is getting the accents removed. In order to solve this, you'll need to change the function name to include both the non-accent name (used for the function) along with the accented name (shown to the users) demo

You should only need to change the filterControversy object as follows:

var filterControversy = {
  'Aucun': function(e, n) {
    return e == '';
  },
  'Modere|Modéré': function(e, n) {
    return e == 101;
  },
  ' >=Modere| >=Modéré': function(e, n) {
    return e >= 101;
  },
  'Serieux': function(e, n) {
    return e == 102;
  },
  ' >=Serieux| >=Sérieux': function(e, n) {
    return e >= 102;
  },
  'Severe|Sévère': function(e, n) {
    return e == 106;
  },
  'Majeur': function(e, n) {
    return e == 103;
  },
  'Tous': function(e, n) {
    return e != '';
  }
};

The | separator can be changed using the filter_selectSource widget option