Sorting non-ASCII characters and data-content HTML Tag sorting

markjo

In my table contents i have cells which have non-ASCII Turkish characters.

For example datatables sort my column like this:
[code]Alli
Beni
May
Zarra
Şahin[/code]

But the last word "Şahin" must be placed between "may" and "zarra"
Because in Turkish language "ş" letter comes after "s" letter.

Is it possible to sort the column regarding to UTF-8 characters?
Thank you for help.

markjo

I also added [code]charset="utf-8"[/code] attribute to between my script tags.
But it didn't help.

allan

In theory you should be able to use a sorting plug-in that uses localeCompare. I'd suggest trying that and seeing how it goes for you. The reason it isn't in DataTables core is that I've found localeCompare to be unreliable across browsers.

I'd suggest also having a look at the answers to this SO question: http://stackoverflow.com/questions/3630645/how-to-compare-utf-8-strings-in-javascript

Allan

allan

For reference - this is where I tired to use localeCompare:
https://github.com/DataTables/DataTables/commit/f535031e41462f4c2d700d08d8f1aa5996b5ae21

And this is where I rolled it back (unit test errors in IE9):
https://github.com/DataTables/DataTables/commit/b447a0d4a92791a9cdc44006fadc47b5a845f340

And the thread where tis was discussed:
http://datatables.net/forums/discussion/7441

Allan

markjo

@Allan thank you for detailed help.

markjo

If the localCompare has browser compatibility issues i don't prefer to use it..
Because %35 of my visitors use IE browser.
That can be an option if IE usage percentage lowers more.

The first thing cam to my mind is to "transliterate" the cell text, and put transliterated text into title attribute of cell and sort by using hidden title..

markjo

I transliterated cell contents to ASCII characters and sorting worked fine.
That makes most of job well.

But there is one more issue.
In table there exist 100 string entries.
Although all of them have ASCII characters,
10 entries doesn't sorted properly.
I transliterated it, escaped special characters, removed all characters like /()&;
But still some of the entries behaves strangely.

When i removed html tags in "td" everything works fine. But it behaves strange in html tags.

Actual cell is like this:
[code]
$content = htmlspecialchars($oldContent);



Name
[/code]

Library automatically marks cell as "html".
When i change "sType" to "string", table was sorted regarding to "data-content" attribute's text.
I need to sort column regarding to "Name".

I also use "title" tag of "button" for my popover.
So it seems like "title" doesn't solve my issue.

markjo

As far as i find code breaks from the
"data-content" attribute. IT works well without "data-content".

In datatables.js I put alert into this:
[code]"html-asc": function ( x, y )[/code]

I saw that for problematic entries "x" value comes with full html, while y comes only text inside "span"
Like this:

[code]"html-asc": function ( x, y )
{
alert("string-desc \n\n\n x: " + x + "\n\n\n y: " + y +
"\n\n\n result: " + (x > y));

return ((x < y) ? -1 : ((x > y) ? 1 : 0));
},[/code]

and one of myproblematic entry shows like this:

[code]x: john

y: williams

result: true[/code]

markjo

In this issue, in html sorting is it possible to ignore other attributes and only compare plaintext of the cell ?
Thank you

allan

Just strip out the HTML?

[code]
a.replace( /<.*?>/g, "" );
[/code]

Allan

markjo

Jsfiddle example:
http://jsfiddle.net/axfsD/1/

-----------

Thank you @Allan

Doesn't "html-pre" does this?

I edited html-pre like this:
[code]
"html-pre": function ( a )
{
var sonuc = a.replace( /<.*?>/g, "" ).toLowerCase();
if (sonuc.indexOf("button") != -1 && sonuc.indexOf("popover") != -1) {
$('body').append('' + a + '

' + sonuc);
}

return a.replace( /<.*?>/g, "" ).toLowerCase();
},
[/code]

One of the result is like this:
[code]
mihan tosun





mihan tosun
[/code]

Should I change something more in html-pre?

allan

> Doesn't "html-pre" does this?

IOh I see - you are actually editing DataTables core rather than using a plug-in? In which case, yes it would. I'd suggest echoing out the data being sorted in the sorting functions to check that it is what you expect.

Allan

markjo

I edited core to check the behaviour of "html-asc" and "html-desc".
So in my case a.replace() didn't strip all html tags.
I suppose it is a bug of replace() method.
So maybe other people would suffer from it later.
Is there an advantage of replace() to jquery.text() function ?

I created a plugin like below. It works as i needed.
Thank you very much for your guidance.

[code]
jQuery.fn.dataTableExt.oSort['html-better-asc'] = function(a,b) {
var x = $(a).text();
var y = $(b).text();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};


jQuery.fn.dataTableExt.oSort['html-better-desc'] = function(a,b) {
var x = $(a).text();
var y = $(b).text();
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]

arunhi2

I am using datatable with python and django. DataTable fails due to invalid json. Following is my JSON response. i was able to find the problemetic line after validating the json with an online json validator (http://jsonlint.com/). This is failing due to a back slash , can any one help me , how to deal this ?

{
"sEcho": 3,
"iTotalRecords": 93,
"iTotalDisplayRecords": 93,
"aaData": [
[
"ARUN\SAMPLE",
"323",
"None",
"Active"
]
]
}