Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 26, 2015 at 8:51 am #524714
    janicenisha

    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!

    October 26, 2015 at 4:40 pm #525032
    Elliott

    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, 1 month ago by Elliott.
    October 26, 2015 at 5:16 pm #525062
    janicenisha

    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.

    October 28, 2015 at 11:04 am #525986
    Ismael

    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

    October 28, 2015 at 11:26 am #526002
    janicenisha

    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.

    October 28, 2015 at 2:00 pm #526076
    Ismael

    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

    October 29, 2015 at 1:47 am #526493
    janicenisha

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

    October 29, 2015 at 6:44 am #526532
    Ismael

    Hey!

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

    Regards,
    Ismael

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