How to display data containing french characters sorted correctly ?

jlt01

I have a list of names in a table. Some have french characters and there rows are not showing in correct order.
My data is correctly sorted by the database query.
When applying the datatable plugin the names are rearranged in worng order.
Where can I get a full working example ?
I tried the intl plugin. Doesn't work.
Thank you.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rf1234

I tried the intl plugin. Doesn't work.

I can reassure you: it works! So you must have made a mistake somewhere?!

I run this code before data table initialization:

//sorting:
//Use the phonebook variant of the German sort order, 
//which expands umlauted vowels to character pairs: ä → ae, ö → oe, ü → ue.
if (lang === 'de') {
    $.fn.dataTable.ext.order.intl("de-DE-u-co-phonebk");
} else {
    $.fn.dataTable.ext.order.intl("en-GB");
}

that's all to make it work. Just replace "de-DE-u-co-phonebk" with "fr".

Did you see this?
https://datatables.net/blog/2017-02-28#Usage

jlt01

Thank you rf1234 for your answer. What you gave me is correct and let me find the real problem: my list of names are links to the profile page of the names. If I remove the <a></a> tags in my table the sorting is accurate.

So my question is now: How can we sort links containg french charaters in their labels?
Thank you.

colin

You can remove the HTML in the columns.render for sort. If that doesn't help, please provide a test case as requested before,

Colin

jlt01

I manage to make a test case. Sorry for the delay, it is my first time. This tool is fantastic.
Here is the test case: http://live.datatables.net/wozigozo/1/edit
The table shows the content as sorted correctly from the database query.
On the right you can see that the entry "Bédard" is shown at the end. It should appear at the 6th row position.
Please show me how to fix this. The data contains html <a> and it should be ignored by the sort. I can't find how to do it. thank you.

colin

Yep, it's the HTML, you can strip it out like this: http://live.datatables.net/wozigozo/2/edit

    columnDefs: [{
      targets: '_all', render: function(data, type, row, meta) {
        return type === 'sort'? data.replace( /<.*?>/g, '' ) : data;
      }
    }]

Colin

jlt01

Thank you for showing how to code it but the sorting result is still the same.
If you look at http://live.datatables.net/wozigozo/2/edit the entry "Bédard" is still showing last whitch is wrong.
Thank you

rf1234

As I said before you need the international sorting plug in as well!

Add this line of code before data table definition:

$.fn.dataTable.ext.order.intl("fr");

https://datatables.net/blog/2017-02-28#Usage

https://datatables.net/plug-ins/sorting/intl

rf1234

This works
http://live.datatables.net/qebageza/1/edit

Unfortunately I couldn't use the CDN for the plug in. Didn't work in the tool but it works in my own code. So I just copied the entire plug in into the JS code.

It doesn't work with this though:

columnDefs: [{
  targets: '_all', render: function(data, type, row, meta) {
    return type === 'sort'? data.replace( /<.*?>/g, '' ) : data;
  }
}]

But it works if you get rid of the HTML in all cases like this:

columnDefs: [{
  targets: '_all', render: function(data, type, row, meta) {
    return data.replace( /<.*?>/g, '' );
  }
}]

This one is better: The HTML is there in display mode but it isn't in all other modes which makes the plugin work:
http://live.datatables.net/jequrace/1/edit
with column defs like this:

columnDefs: [{
  targets: '_all', render: function(data, type, row, meta) {
    if ( type !== 'display' ) {
          return data.replace( /<.*?>/g, '' );
     }
     return data;
  }
}]

jlt01

The last solution given worked. Thank you.