Hi Merrin,
sorting currencies needs some “special treatment”. This is because the JavaScript code does not know that the cell content is a currency value and then believes it is a string (because there is a currency sign in the cell, which obviously is not a number or digit but a character or letter).
From the DataTables website I found some code which should tell the plugin how to sort currencies. I built a WP-Table Reloaded Extension from that, which you can get here: http://tobias.baethge.com/download/plugins/additional/wp-table-reloaded-currency-sorting.zip
Please install that as a regular WordPress plugin and activate it.
After that, you will need to add a command to the “Custom Commands” textfield in the “DataTables JavaScript Features” section on the “Edit” screen of your table:
"aoColumnDefs": [ { "sType": "currency_sorting", "aTargets": [ "column-8" ] } ]
(I did not yet have a chance to test this code, so it might not work out of the box. Also, the code is depending on the position of the “Profit&Loss” column. If that for some reason moves its position away from being column 8, the code above needs to be adjusted).
Regards,
Tobias
Hi again,
and for your second question on the arrows:
The problem here is that the text in your table head is for most columns longer than the actual content in the cells. Therefore, they are the determining factor for the column widths. And as the arrows are background images in the header cells, that results in the arrows being behind the text.
The trick here is to either make your table head text shorter (you could experiment with line breaks in those cells which have two words), or to make them longer where line breaks are not possible, by adding non-breaking spaces behind the text, i.e. change
Direction
to
Direction
Best wishes,
Tobias
Thanks for your help, the sorting is now working and it looks like adding non-breaking spaces will fix the headers.
Is there any way to make the arrows appear without ticking the default CSS box? We are not using the default CSS so whenI tick the box, the table styling changes.
Thanks
Merrin
Hi,
great that the sorting now works! 🙂
About the arrows: If you don’t want to load the default CSS, you will need to extract the code for the arrows from it and load it e.g. with your theme CSS. The arrows can only be added with CSS, so you will either need to load the default CSS or copy it somewhere to use it from there.
Regards,
Tobias
Hi,
Is this the correct code to use for the arrows?
.wp-table-reloaded .sorting {
background: #E6EEEE url(../img/bg.gif) no-repeat center right;
cursor: pointer;
}
.wp-table-reloaded .sorting_asc {
background: #8DBDD8 url(../img/asc.gif) no-repeat center right;
}
.wp-table-reloaded .sorting_desc {
background: #8DBDD8 url(..img/desc.gif) no-repeat center right;
}
And do I put it in the WP-Table Reloaded Custom CSS box or directly into the theme css?
Thanks,
Merrin
Hi,
yes, that should be the relevant part.
However, you should make the paths to the images absolute, i.e. use the full URL to the images (otherwise they might not show on all pages, because they can not be found through relative URLs).
After that change, it does not really matter where you put it, “Custom CSS” and your theme’s style.css are both ok.
Best wishes,
Tobias
