[Gelöst] Display number of posts in a view based on conditions

[Author]

Artikel

[Rune Brynestad]

I have created a sinple table view here:
versteckter Link

On the bottom of the page I want to display some calculated output.
Number of posts is displayed with the shortcode [wpv-found-count]
Is it possible to display number of posts based on condition in the columns Branninstruks, Rømningsveier, Slokkerutstyr and Møteplass?
(See bottom of the page for the conditions I want to display)

Thanks in advance.

Kind regards
Rune

[Minesh]

Hello. Thank you for contacting the Toolset support.

There is no such option available to count the specific values in specific columns but you may do it by adding custom jQuery code.

For example:
For the first row - td having the Ja value is 4 and the count should return 4.

count = jQuery(".js-wpv-view-layout table tr:eq(1) td:contains(Ja)").length;

You will require to adjust/add the required JS code accordingly.

[Rune Brynestad]

Hi Minesh

Thanks for jumping in.

Your custom jQuery code count content that contains in a row. I need to count the content that contains in a column. In my test page, the numbers should be like this:

Number of posts with Branninnstruks = "Ja": 6
Number of posts with Rømningsveier = "Ja": 7
Number of posts with Slokerutstyr = "Ja": 7
Number of posts with Møteplass = "Ja": 7

Is it possible with columns and custom jQuery code count ?

Thanks again for looking into this.

Kind regards
Rune

[Minesh]

You should try to add the following code to your view's JS box:

jQuery(document).ready(function($){
counter = function(textMatch,index){
    count=0;
    jQuery('.js-wpv-view-layout').find('tbody tr').each(function( index ) {
        //if second <td> contains matching text update counter
        if(jQuery(jQuery(this).find('td')[index]).text() == textMatch){
            count++
        }
    });
    return count;
}

jQuery(".branninnstruks .count").html(counter("Ja",2));
jQuery(".branninnstruks .count").html(counter("Ja",3));
jQuery(".branninnstruks .count").html(counter("Ja",4));
jQuery(".branninnstruks .count").html(counter("Ja",5));

});

You should add your lines where you added the static lines within your Loop Editor as given under:

<div class="branninnstruks"> Number of posts with Branninnstruks = "Ja": <div class="count"> 0 </div> </div>
<div class="romningsveier"> Number of posts with Rømningsveier = "Ja": <div class="count"> 0 </div> </div>
<div class="slokerutstyr"> Number of posts with Slokerutstyr = "Ja": <div class="count"> 0 </div> </div>
<div class="Moteplass"> Number of posts with Møteplass = "Ja": <div class="count"> 0 </div> </div>

[Rune Brynestad]

Hi Minesh

Thanks for your suggestion, but I'm afraid it did not work quite as expected.

It's counting the first row only, not the columns "Branninnstruks" , "Rømningsveier", "Slokkerutstyr" and "Møteplass".

Please check the output:
versteckter Link

Thanks

Kind regards
Rune

[Jamal]

Hello Rune, Minesh is on a vacation for a couple of days. If you don't mind I'll continue with you on this thread.

I would suggest that you add a special class to each column, then you can use jQuery to count the instances. Check this screenshot, where I added a class "bran" in the browser dev tools to the columns "Branninstruks" and how it calculated the instances with the following code versteckter Link

jQuery(".js-wpv-view-layout table .bran:contains(Ja)").length;

Does it make sense to you? If not, please allow me temporary access to the admin area and I'll prepare an example for you. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

I made a slight change to the class names by removing the (;) at the end. Then I updated the Javascript code with the following:

jQuery(document).ready(function($){
  $('div.bran .count').html($(".js-wpv-view-layout table .bran:contains(Ja)").length);
  $('div.romn .count').html($(".js-wpv-view-layout table .romn:contains(Ja)").length);
  $('div.slok .count').html($(".js-wpv-view-layout table .slok:contains(Ja)").length);
  $('div.mote .count').html($(".js-wpv-view-layout table .mote:contains(Ja)").length);
});

And it worked. Check this screenshot versteckter Link

All the best,
Jamal

[Rune Brynestad]

Thanks Jamal

This is perfect 🙂

Is it possible to have the values and labels on the same line?

Number of posts with Branninnstruks = "Ja": 6
insteead of
Number of posts with Branninnstruks = "Ja":
6

Thanks again for looking into this.

Kind regards
Rune

[Jamal]

Sure Rune,

The counters are put inside a <div> tag which is by default displayed as a block(in its own row or line), I would use an inline tag such as <span> tags. versteckter Link

I changed it on the view.

[Rune Brynestad]

Perfect 🙂

I also wonder if it's possible to do som math with this script.

I was thinking about calculating a score like this:

Number of posts with Branninnstruks = "Ja" / Number of posts * 100
which should be 6 / 7 * 100 = 85,71 (rounded up to 86, no decimals)

Number of posts with Rømningsveier = "Ja" / Number of posts * 100
which should be 7 / 7 * 100 = 100

and so on

Kind regards
Rune

[Jamal]

Would you like to display the counts and the scores or only the scores? Where do you want to display them? Can you add an example of how it should be?

In the meantime, I would like to explain the following:
- The count can be done using $(".js-wpv-view-layout table .bran:contains(Ja)").length.
- The total number can be done using $(".js-wpv-view-layout table .bran").length.
- The calculation and getting 2 decimals after the comma can be done using this ( (count / total) *100 ).toFixed(2)

Let me know how do you want to display the results(count and/or score) and I'll help with it.

[Rune Brynestad]

I would like to display the score under the existing counts like this:
versteckter Link

It is not necessary to show the end user how scores are calculated. Just the label and the value.

Thanks again.

Kind regards
Rune

[Jamal]

Hello Rune, I built this too using the following code(updated):

jQuery(document).ready(function($){
  var bran = $(".js-wpv-view-layout table .bran:contains(Ja)").length;
  $('div.bran .count').html( bran );
  $('div.bran .score').html( ( ( bran / $(".js-wpv-view-layout table .bran").length ) * 100 ).toFixed(2) );
  
  var romn = $(".js-wpv-view-layout table .romn:contains(Ja)").length;
  $('div.romn .count').html(romn);
  $('div.romn .score').html( ((romn / $(".js-wpv-view-layout table .romn").length ) *100 ).toFixed(2) );
  
  var slok = $(".js-wpv-view-layout table .slok:contains(Ja)").length;
  $('div.slok .count').html(slok);
  $('div.slok .score').html( ((slok / $(".js-wpv-view-layout table .slok").length ) *100 ).toFixed(2) );
  
  var mote = $(".js-wpv-view-layout table .mote:contains(Ja)").length;
  $('div.mote .count').html(mote);
  $('div.mote .score').html( ((mote / $(".js-wpv-view-layout table .mote").length ) *100 ).toFixed(2) );
});

Best regards,
Jamal

[Rune Brynestad]

My issue is resolved now. Thank you!