WordPress.org

Ready to get started?Download WordPress

Forums

[WP-TABLE RELOADED] Easy way for client to right-align currency data (20 posts)

  1. erinanne
    Member
    Posted 2 years ago #

    I need a simple way for a client to cause one column in some tables to right-align so that her dollar-value data line up properly over each other in the usual accounting fashion.

    She will need to add tables on a recurring basis, and doesn't know coding, so coding each table separately won't work for her. Not every table will use the same layout, and the website is designed to be self-serve for her to use and update without my assistance.

    Her example is at http://www.lawfoundationbc.org/grants/

    I tried using <td align="right">$100.00</td> in the cells in my experimental table in my own website, http://www.kiangle.com/?p=520, but this created an extra column, as you can see. Obviously, I'd like the data to be under the "Amount" heading!

    Any ideas?

    Thanks for your help.

    ea/

  2. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    thanks for your post.

    Unfortunately, I don't yet have an idea for a quick and easy, ready-to-use solution.

    The main question basically is:
    Do all tables (in WP-Table Reloaded) on that site have three columns, where the third column contains a currency value that shall be right aligned?
    If that's the case, just a small piece of CSS is necessary.

    If not, we could use a filter hook to add a CSS class to all cells that contain the $ symbol (as that's going to be a cell with a currency value obviously), and then use that CSS class to align the text to the right.

    Regards,
    Tobias

  3. erinanne
    Member
    Posted 2 years ago #

    Hi TobiasBg,

    Thank you for your response; I appreciate you answering my question.

    No, the tables in the site are in different formats. Some of them provide an index to publications that can be downloaded, with no currency values included. Therefore, adding one-size-fits-all-tables CSS isn't an option.

    So, on to option two: adding a filter hook that triggers right-align when the cell contains a $ symbol. That sounds like something that could work. How do I do that?

    Thanks!

    ea/

  4. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    ah, ok, that's what I thought.

    Then lets try the filter hook idea.
    You'll basically just need to create a new "Plugin Extension" for WP-Table Reloaded, which is described here: http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/extensions/

    The relevant code to add a CSS class "currency-value" to all cells with a "$" symbol is this (I just went ahead and developed it for you :-) ):

    function wp_table_reloaded_cell_class_currency_value( $class, $table_id, $row, $column, $cs, $rs, $cell_content ) {
    	if ( false !== strpos( $cell_content, '$' ) )
    		$class .= ' currency-value';
    	return $class;
    }
    add_filter( 'wp_table_reloaded_cell_css_class', 'wp_table_reloaded_cell_class_currency_value', 10, 7 );

    This code basically checks the cell content of each table, on whether it contains an $ somewhere. If it does, the CSS class "currency-value" is added to the cell.
    This then gives us the possibility to use the following CSS code (which needs to be added to the "Custom CSS" textarea on the "Plugin Options" screen). That code will right-align all cells that have the class "currency-value".

    .wp-table-reloaded .currency-value {
    	text-align: right !important;
    }

    Regards,
    Tobias

  5. erinanne
    Member
    Posted 2 years ago #

    Hi Tobias,

    I'm really grateful for your help. However, I seem to be missing something, as the numbers are not yet right-aligning in my practice post (scroll down to the second and third tables):

    http://www.kiangle.com/demo-right-justify-a-column-in-wp-table-reloaded/

    Here is what I did.

    1. Went to your post on creating an extension file for wp-table-reloaded, http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/extensions/

    2. I created a new document in TextEdit called wp-table-reloaded-extensions.php, with this "assembled" code in it (select-all-copy-paste):

    <?php
    /*
    Plugin Name: WP-Table Reloaded Extensions
    Plugin URI: http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/extensions/
    Description: Custom Extensions for WP-Table Reloaded
    Version: 1.0
    Author: Tobias Baethge
    */
    
    // 
    
    function wp_table_reloaded_cell_class_currency_value( $class, $table_id, $row, $column, $cs, $rs, $cell_content ) {
    	if ( false !== strpos( $cell_content, '$' ) )
    		$class .= ' currency-value';
    	return $class;
    }
    add_filter( 'wp_table_reloaded_cell_css_class', 'wp_table_reloaded_cell_class_currency_value', 10, 7 );
    
     
    ?>

    3. I saved the file and uploaded it to the plugins folder on my server ( /wp-content/plugins ), and not into the wp-table-reloaded folder, as per the instructions in your post on creating extensions.

    4. Then I went into Plugins Options for wp-table-reloaded. I copy-pasted the following into the Custom CSS box and selected the checkbox:

    .wp-table-reloaded .currency-value {
    	text-align: right !important;
    }

    I must be missing something, even after triple-checking it. Can you see where I may be going wrong?

    Thanks so much! (Hoping this will be helpful for others, too!)

    ea/

  6. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    that looks great so far, and you did everything correct! :-)

    Just one more small step: As the wp-table-reloaded-extensions.php file that you created is a new (though small) WordPress plugin, you have to activate it, just like any other plugin. So, in your Dashboard, go to "Plugins", and in that list you'll find a new plugin "WP-Table Reloaded Extensions" which you'll just have to activate there.

    Best wishes,
    Tobias

  7. erinanne
    Member
    Posted 2 years ago #

    Hi Tobias,

    I'm afraid I'm getting this message when I try to activate the plugin:

    se error: syntax error, unexpected T_FUNCTION in /home6/letaloui/public_html/kianglecom/wp-content/plugins/wp-table-reloaded-extensions.php on line 16

    This is what the full code looks like, and line 16 starts with "function"

    <?php
    /*
    Plugin Name: WP-Table Reloaded Extensions
    Plugin URI: http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/extensions/
    Description: Custom Extensions for WP-Table Reloaded
    Version: 1.0
    Author: Tobias Baethge
    */
    
    /*
    * Extension: Check for $ in cell to tag cell as currency-class value
    */
    
    //
    
    function wp_table_reloaded_cell_class_currency_value( $class, $table_id, $row, $column, $cs, $rs, $cell_content ) {
    	if ( false !== strpos( $cell_content, '$' ) )
    		$class .= ' currency-value';
    	return $class;
    }
    add_filter( 'wp_table_reloaded_cell_css_class', 'wp_table_reloaded_cell_class_currency_value', 10, 7 );
    
    ?>

    I've looked through this guide on PHP, http://www.brandonsavage.net/how-to-write-a-function-in-php/, but still can't figure out what the syntax error is.

    Please advise!

    Getting close...

    :-)

    Many thanks,

    ea/

  8. erinanne
    Member
    Posted 2 years ago #

    Oops... sorry, missed the beginning of the error message in my copy-paste (although I'm sure you can figure it out still):

    Plugin could not be activated because it triggered a fatal error.

    Parse error: syntax error, unexpected T_FUNCTION in /home6/letaloui/public_html/kianglecom/wp-content/plugins/wp-table-reloaded-extensions.php on line 16

    Sorry.

    ea/

  9. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    that's odd. I just copied the code and tried myself, and I don't get any errors. Also, I can't spot any mistakes in the code, that could cause this error message...

    Now, it might be possible that there's some "invisible white-space" in the file somehow (from copy&paste), that could be causing this.
    Can you try removing it, by editing the file like this:
    Place the cursor right in front of the "f" in function, in line 16. Then press the Backspace key several times, until the cursor/caret is right behind the / in the */ line. (Yes, this will remove the //, which is ok.)

    If that does not fix it, please contact me by email (the address is in the main plugin file "wp-table-reloaded.php". I would then like to take a direct look at the file.

    Regards,
    Tobias

  10. erinanne
    Member
    Posted 2 years ago #

    Hi Tobias,

    Sorry to create such a puzzle for you!

    Now the error has moved to Line 12, so I'll drop you a note.

    Thanks for your help!

    (Let's post the solution here when we solve it?)

    ea/

  11. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    just as a short update for everybody else:

    After taking a direct look at the file in question, we found that there was some invisible white-space at the end of the file, which seems to have caused this. It probably crept up from some copy&paste operation.
    Removing the white-space allowed the plugin to be activated, and it is now working as intended :-)

    Best wishes,
    Tobias

  12. erinanne
    Member
    Posted 2 years ago #

    Thank you for your help, Tobias!

    :-)

    ea/

  13. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    no problem, you are very welcome! Good to see that it works :-)

    Best wishes,
    Tobias

  14. lloydacris
    Member
    Posted 2 years ago #

    Hi Tobias,

    I had a similar issue today - white-space was causing a Parse error: syntax error, unexpected T_FUNCTION when I tried to activate extension plugin. I had copied the code directly from your website. I fixed it by first pasting the code into TextEdit and making it plain text. Then copied this into my file.

    (awesome plugin by the way)

  15. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    ah, you are refering to http://wordpress.org/support/topic/plugin-wp-table-reloaded-custom-name-in-the-admin-menu

    Great that you found the solution. Yes, some weird things with white-space seem to be going on right now... I checked the code on my site again, but couldn't anything... Really weird...
    In general, removing all line breaks temporarily (and inserting them by manually typing them again), seems to fix this.

    Best wishes,
    Tobias

  16. kmcclory
    Member
    Posted 1 year ago #

    Tobias,

    Sorry for adding to an 8 month old post but I'm using your code from this page and noticed an issue that I'm hoping you can help with. When you add a $ sign to the field it changes the type from numeric to alpha which changes the results from the Table Tools sort function.

    The column is right justified but the numbers are sorted by the first char value rather then the numbers value. So for example, 350 comes before 90 and after 2000.

    the numbers look like this now:
    1
    10
    100
    2
    20
    200

    is there a way to change they type back to number and still display the $ sign?

    Thanks,

    Kevin

  17. TobiasBg
    Member
    Posted 1 year ago #

    Hi Kevin,

    yes, that is correct. The reason is that the $ makes the value to a string which is sorted differently than numbers.

    To sort these currencies, an extra piece of JavaScript code is necessary. Please take a look at the first posts in http://wordpress.org/support/topic/wp-table-reloaded-sorting-currencies-not-working where this is explained.

    Regards,
    Tobias

  18. kmcclory
    Member
    Posted 1 year ago #

    Tobias,

    I've added the plugin and applied the custom code as described in the first post and it seems to be working correctly; however, we're using 4 columns with dollar values and the example only addresses 1 column.

    Can you clarify the custom code so that it can be applied to columns 2 thru 5?

    Thanks,

    Kevin

  19. kmcclory
    Member
    Posted 1 year ago #

    After further research, I was able to find a thread with the answer to my question. The custom code looks like this:

    "aoColumnDefs": [ { "sType": "currency_sorting", "aTargets": [ "column-2", "column-3", "column-4", "column-5" ] } ]

    Thanks for you help.

  20. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    exactly, you will just need to write the columns as a comma-separated list. Great that you found the solution :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic