Ascending/descending values (prices)

mike1985

Hi there,

I'm building a table, but when I fill in values like:

€15,-
€21,-
€170,-
€600,-
€65,-

the ascending/descending function gives this order:
€15,-
€170,-
€21,-
€600,-
€65,-

It looks like the function looks at the first numbers and not at the total value.

Does someone know a solution for this??

mstrand

The currency sorting plug-in should help -

http://www.datatables.net/plug-ins/sorting

Matthew

mike1985

Thanks! I had some trouble searching the right terms...

Can someone tell me how to install a plugin like this? I'm using the WP-Table-Reload plugin for Wordpress, is that a problem?

mike1985

Anybody please??

allan

Documentation: http://datatables.net/plug-ins/sorting#how_to_type
Example: http://datatables.net/examples/plug-ins/sorting_sType.html

Exactly how this fits in with WordPress, I'm not sure though - not something I've used before...

Allan

mike1985

Yeah, I figured that out, but the question remains:

How can I implement a plugin in a Wordpress-plugin?

I hope that someone can help!

Thanks

allan

It might be best to ask that in a WordPress forum. There might be folks hanging around here who can help, but I'm afraid I can't myself.

Allan

sharataka

Hi,

Can you tell me how you solved the problem? I am having the same issue (but not trying to integrate with Wordpress) with percentages. How were you able to solve the problem? I tried following the link but its still not working.

Sharat

[code]




jQuery.fn.dataTableExt.oSort['percent-asc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /%/, "" );
var y = (b == "-") ? 0 : b.replace( /%/, "" );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['percent-desc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /%/, "" );
var y = (b == "-") ? 0 : b.replace( /%/, "" );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
{ "sType": "percent" },
null
]
} );
} );


[/code]

allan

The basic idea that you've got there looks absolutely correct, assuming you have five columns and the fourth one is the one you want to have the custom sorting on. Could you give us a link to the page which is having the problem please?

Thanks,
Allan

sharataka

Hi Allan,

Thanks for getting back to me. The url is http://www.my5or5.com/haha.php. It's the column labeled PJ.

Sharat

allan

Thanks for the link. The problem is that the sort function you have above is removing the % symbol, but it's not stripping out the HTML in your cells. So you need to do both so that it will only have the number information left and sort on that:

[code]
jQuery.fn.dataTableExt.oSort['percent-asc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /<.*?>/g, "" ).replace( "%", "" );
var y = (b == "-") ? 0 : b.replace( /<.*?>/g, "" ).replace( "%", "" );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['percent-desc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /<.*?>/g, "" ).replace( "%", "" );
var y = (b == "-") ? 0 : b.replace( /<.*?>/g, "" ).replace( "%", "" );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]
That should do it.

Allan

sharataka

Awesome! Thanks, Allan!

Was also wondering if you could help me with another question I have. Where do I find the code for the search text and textbox? I ctrl-f the source code and couldn't find it.

allan

You mean you want to change the string "Search:"? That can be done like this: http://datatables.net/usage/i18n#oLanguage.sSearch

Allan

sharataka

I'm interested in changing the text from "Search" to something else, changing the formatting, and also changing the look of the textbox (add some css to it, center it, etc). I can't seem to find where the html for the textbox is.

Sharat

allan

The text can be changed using the property I linked to ( http://datatables.net/usage/i18n#oLanguage.sSearch ). And the styling can be done using CSS selectors: div.dataTables_filter {} and div.dataTables_filter input {} are the two selectors you'd be interested in.

Allan