Display count of items in each group by in the header using a data view

Question

I am doing a group by in my data view web part and would like to be able to show the item count of each group in the header. There is an option you can use from the data view Sort & Group options to turn on item count, but this count shows after the group is expanded and at the very bottom of the group. I want this to be visible before the group is expanded.

Unfortunately, it is not as easy as replacing the variable it uses at the bottom for count and putting in the header.

Answer 1

I was able to do this using jQuery. Like I mentioned in the question, you can turn on the count for each section but it displays only when the group by is expanded and at the very bottom of the section. I wrote a script that grabs that value and appends it to the group by header.

<script type="text/javascript">

//This takes the count created by the Sort & Group data view options and adds it to the header of the group by.
//By default the count only shows at the bottom of the group when it is expanded.
//This is a way to show the count w/o having to open the group.

$(document).ready(function() { 
  var countCells = $("table > tbody > tr > td[class='ms-vh']");
  var header = $("table > tbody > tr[id='group0'] > td");
  var length = $(countCells).length;    

  for(var i = 0; i < length; i++) {
      var headerText = $("table > tbody > tr[id='group0'] > td:eq(" + i + ")").text();
      var countText = $("table > tbody > tr > td[class='ms-vh']:eq(" + i + ")").text();
      countText = /:\s(\d*)/g.exec(countText);
      countText = countText[1];
      $("table > tbody > tr[id='group0'] > td:eq(" + i + ")").append(" (" + countText + ")");
  }

});

</script>