Client-side row grouping demo
Demonstrated features
- row grouping
- responsive table
- default styling
Required skills
- expert
Required license
- premium
This data table 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. Enter mini in the search box to see row grouping in action. Click on column header to change the order within the group.
| Product line | Product ID | Product name | Vendor | Stock | Price | Retail price | Description |
|---|---|---|---|---|---|---|---|
| Product line | Product ID | Product name | Vendor | Stock | Price | Retail price | Description |
How to Add row grouping
The following options were added to this data table (read more). The fnRowCallback adds a $ in front of the amount columns.
Advanced options to add row grouping:
{
"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.
JavaScript to add row grouping:
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)
0 Comments