WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded - Sorting currencies not working (7 posts)

  1. socialmediasorted
    Member
    Posted 3 years ago #

    We are having trouble with the sorting feature on some of our table that show currencies.

    For example http://advantagetradingsystems.com/futures-systems/investor-1/ the Daily Results table is not sorting correctly on the Profit & Loss column.

    Also when I try to show the arrows for sorting, they get squashed up with the title no matter how wide I make the heading.

    Thanks for your help.

    Merrin

  2. TobiasBg
    Member
    Posted 3 years ago #

    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

  3. TobiasBg
    Member
    Posted 3 years ago #

    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

  4. socialmediasorted
    Member
    Posted 3 years ago #

    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

  5. TobiasBg
    Member
    Posted 3 years ago #

    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

  6. socialmediasorted
    Member
    Posted 3 years ago #

    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

  7. TobiasBg
    Member
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic