Row grouping client-side

This publication demostrates row grouping with client-side processing.

The table data of this publication is ordered and grouped by product line and can be reordered interactively within the group. Interactive reordering within a group is only possible with client-side processing. Row grouping is a premium feature.

  Enter mini in the search box to see row grouping in action (click on column header to change the order within the group)
Product lineProduct IDProduct nameVendorStockPriceRetail priceDescription
Product lineProduct IDProduct nameVendorStockPriceRetail priceDescription

Shortcode arguments used for this demo

[wpdataaccess pub_id="16"]

Adding row grouping to a publication

The following options were added to this publication (read more). The fnRowCallback adds a $ in front of the amount columns.

{
	"serverSide": false,
	"rowGroup": { 
		"dataSrc": 0,
		"endRender": "function ( rows, group ) { return code_manager_row_grouping_demo(rows, group) }"
	},
	"fnRowCallback": "function(row, data, index) { jQuery(row).find('td:eq(5)').text('$' + data[5]);jQuery(row).find('td:eq(6)').text('$' + data[6]); }"
}

The endRender function of this rowGroup calls javascript function code_manager_row_grouping_demo. This function was added to this page with the Code Manager.

function code_manager_row_grouping_demo(rows, group) {
	var avgInStock = rows.data().pluck(4).reduce( function (a, b) { return parseFloat(a) + parseFloat(b); } ) / rows.count();
	
	var avgPrice = rows.data().pluck(5).reduce( function (a, b) { return parseFloat(a) + parseFloat(b); } ) / rows.count();
	avgPrice = jQuery.fn.dataTable.render.number('.', ',', 2, '$').display( avgPrice );
	
	var avgRetailPrice = rows.data().pluck(6).reduce( function (a, b) { return parseFloat(a) + parseFloat(b); } ) / rows.count();
	avgRetailPrice = jQuery.fn.dataTable.render.number('.', ',', 2, '$').display( avgRetailPrice );
	
	//return "Average for " + group + ": " + Math.floor(avgInStock) + " : " + avgPrice + " : " + avgRetailPrice;
	return jQuery('<tr/>')
		.append('<td colspan="4">Averages for '+group+'</td>' )
		.append('<td class="quantityInStock">'+Math.floor(avgInStock)+'</td>')
		.append('<td class="buyPrice">'+avgPrice+'</td>')
		.append('<td class="MSRP">'+avgRetailPrice+'</td>');
}

Limitations

  • Nested grouping is not supported
  • Grouping information is not exported (PDF, CSV, etc)