Add Record Count to table groups

API & Customization Show & Tell
1

1. Create your table with groups as per http://helpdesk.knackhq.com/support/solutions/articles/5000443486-tables#columns

2. Add Javascript and change XXX to your view:

//Call the function when your table renders
$(document).on('knack-view-render.view_XXX', function (event, view , data) {
  addGroupRecordCount(view);
})

// Adds the record count to the group text

var addGroupRecordCount = function (view) {

$(’#’ + view.key + " .kn-table-group").each(function () {

var StartRow = this.rowIndex;

var TableRows = $(this).parent().children();

var RowCount = 0;


TableRows.each(function( index ) {
  if(this.rowIndex > StartRow) {
    var RowClass = $(this).attr('class');
    
    if(typeof RowClass === 'undefined' || RowClass == 'even') {
      RowCount = RowCount + 1;
    } else {
      return false;
    }
  }
});

var RowText = $(this).text() + '(' + RowCount + ')';

$(this).find('td').each(function () {
  if($(this).text().length > 1){$(this).html(RowText)}
});



});

}


2

How can I add to the code a custom style to row count number? tks!

3

Thanx Brad!

Nice one.

4

Josh - it would be possible but with some problems:

  1. The filters load items on the fly, so you'd have to code an Ajax call to count the items that fit the filter criteria on view render, adding significant load time to the page. Then add the number to the filter text (the easier part).
  2. Or, create a view on the same page that contains Count fields for each filter, read those numbers and add them to the filter text. That means adding fields to objects and making sure they calculate the same records as the view filters do all the time.

My code above simply counts the rows between groups without having to read from the underlying database so the overhead is low and the load time hardly changes.

5

Brad, instead of doing this with table groups, would you know how to do this with table Filter Menus?

1 Like
6

Thanx Brad!

7

Hi Brad,

Will you please visit this code again? I would like to implement this solution, but the code doesn’t seem to work anymore.

Do you think this can be used with the group collapse script?