Diacritic Neutralize not working when column render is applied.

mikelcal

I have a table where I am storing a value to copy in the last column.

I am using the column render to do this. My table contains special characters, and I am also using mark.js and diacritics-neutralize. The problem I am having is that somehow enabling the render option interferes with the diacritics neutralize and the filter doesn't match special characters. What am I doing wrong?

Here is my datatables code:

// Initialize DataTables
$('.datatables-table').DataTable({
// Enable mark.js search term highlighting
mark: true,
'columnDefs': [
{
'targets':[5],
'render': function(data, type, full, meta){
return '<button type="button" class="btn btn-light float-right copy-text" data-toggle="modal" data-full-path="' + full[5] + '">Copy</button>'
}
}]

});

I made a fiddle to show the issue here:
https://jsfiddle.net/Lfxap5nh/

kthorngren

Thanks for the test case. I'm not sure what to do to see the issue. Please provide the steps to show the problem.

Kevin

mikelcal

Thanks Kevin,

I have added several special characters to test.

For example, searching for Software Engineer should return 6 entries, I have made three of those to have special characters.

• Software Engíneer
• Software Engïneer
• Software Engîneer

With the column render option enabled, I only see the 3 cases without special characters.

I've been at this for more than a couple of hours, and I still am not able to figure out why it is not working on my end.

Any help is appreciated!

kthorngren

I just realized that the Diacritics-neutralise-sort is a sorting plugin not a search plugin It won't help with searching.

I didn't see any special characters for Software Engineer. Maybe you forgot to save the changes - I continually have this problem as I'm used to the auto-save of JS Bin. But I did notice one for Tiger Ñixon. The cool thing about using the Diacritics-neutralise-sort is it has a function to remove the special characters. You can leverage this function using columns.render. Here is your updated fiddle:
https://jsfiddle.net/9ma2r3hb/

Search for nixon and you will see the result. This leverages Orthogonal Data but running the function to remove the special characters for the filter type.

I also added the Diacritics-neutralise-sort CDN to the fiddle.

Side Note: Your render function is for targets: 5 and you pull data from full[5]. Since fill[5] is the same column you can just use the data parameter which is the data for that column. Just an FYI, either will work.

Kevin

mikelcal

Thank you Kevin!
I was looking for documentation on how to use the filter option. In the render function.

I was trying to use the data-sort and data-filter as explained here https://datatables.net/examples/advanced_init/html5-data-attributes.html
in the return statement.

The reason I have the data render use full[5] is because on my real data I have two hidden columns. I'm including in the cell with the copy button 3 different data values for users to select one of 3 options.

To make sure I understand,

{targets: 0, 
                render: function (data, type, row) {
                if (type === 'filter') {
                    return removeDiacritics( data.toString().toLowerCase() );
                }
                return data;
              }

The targets:0 means all data,
the render: function returns a data object with diacritics removed and stringified to lower case?

kthorngren

The targets:0 means all data,

No, that means column 0. You can use the string "_all" in columnDefs for all columns.

the render: function returns a data object with diacritics removed and stringified to lower case?

Yes, you can add a console.log() statement to see this, for example:

                render: function (data, type, row) {
                if (type === 'filter') {
                    console.log(removeDiacritics( data.toString().toLowerCase() ));
                    return removeDiacritics( data.toString().toLowerCase() );
                }

Kevin