Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #524714

    Hi there, I’m using the wpDatatables plugin. I need to make my positive values appear in green and the negative values in red. Ive tried adding this function in my theme but it does not work. Is there anything else i should add before the add filter? Can you help with what I’m doing wrong? Tx

    add_filter( ‘wpdatatables_after_table’,’MakeNegative’,10,1);

    Also added this in the custom js of the plugin
    function MakeNegative($table_1) {
    TDs = document.getElementsByTagName(‘td’);
    for (var i=0; i<TDs.length; i++) {
    var temp = TDs[i];
    if (temp.firstChild.nodeValue.indexOf(‘-‘) == 0) temp.className = “negative”;
    }
    }

    css:
    .negative {color: red;}

    Thanks!

    #525032

    Hi janicenisha!

    It would be best to contact the plugin authors about this but it sounds like an easy CSS fix so send us a link to your page and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    • This reply was modified 9 years, 2 months ago by Elliott.
    #525062

    Hi Elliot,
    Thanks for agreeing to take a look, have been going back and forth with this. My table is here – http://103.51.41.206/~hwangimc/aham/daily-fund-price/, data is pulled from a CSV.

    The plugin developer suggested this but still have not gotten any results :
    jQuery(window).load(function test(){
    jQuery(‘.wpDataTables tbody td’).each(function() {
    var val = jQuery(this).html();
    var value = Number(val.replace(/[^0-9\.-]+/g,”));
    if(jQuery.isNumeric(value) && value > 0) {
    jQuery(this).css(‘color’,’green’);
    } else if(jQuery.isNumeric(value) && value < 0) {
    jQuery(this).css(‘color’,’red’);
    }})
    jQuery(‘.paginate_button’).on(“click”, test);
    });

    Am using a child theme btw. Thanks again for this, appreciate the help.

    #525986

    Hey!

    Please add this in the functions.php file:

    // negative
    function add_custom_script(){
    ?>
    <script>
    (function($) {
    	$('.numdata').each(function() {
    		if ($(this).text().indexOf('-') != -1) {
    			$(this).addClass("negative");
    		} else {
    			$(this).addClass("positive");
    		}
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    It is going to add the “negative” or “positive” class attribute. Add this in the CSS field:

    .negative {
    color: red;
    }
    
    .positive{
    color: green;
    }

    Regards,
    Ismael

    #526002

    Hi Ismael,

    It works!! Thank you soooo much. Your team is fantastic.

    Thanks again :) It seems to work only if the values are in the ‘Float category though’. I think I can live with this.

    Just one last thing, anyway I can get 0 to no get coloured?

    Thanks again, really appreciate this.

    • This reply was modified 9 years, 2 months ago by janicenisha.
    #526076

    Hey!

    Replace it with:

    // negative
    function add_custom_script(){
    ?>
    <script>
    (function($) {
    	$('.numdata').each(function() {
    		var negative = $(this).text().indexOf('-') != -1,
    			zero = $(this).text().indexOf('0.0000') != -1;
    		if (!negative && !zero) {
    			$(this).addClass("positive");
    		} else if(zero)  {
    			$(this).addClass("zero");
    		} else {
    			$(this).addClass("negative");
    		}
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Replace the css code with this:

    .negative {
    color: red;
    }
    
    .positive{
    color: green;
    }
    
    .zero {
    color: #333;
    }

    Cheers!
    Ismael

    #526493

    Thanks so much Ismael, everything works great! Am a happy customer :)

    #526532

    Hey!

    Great! Glad we could help. If you have more questions, let us know. :)

    Regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How to customize wpdatatables using function.php’ is closed to new replies.