Server-side row grouping demo
Demonstrated features
- row group
- responsive table
- default styling
Required skills
- expert
Required license
- premium
This data table is ordered and grouped by product line. The ordering within the group cannot be changed interactively. This is only possible with client-side processing. Enter mini in the search box to see row grouping in action
| 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 dat atable (read more). The fnRowCallback adds a $ in front of the amount columns.
Advanced options to add row grouping:
{
"rowGroup": {
"dataSrc": 0,
"endRender": "function ( rows, group ) { return code_manager_row_grouping_demo(rows, group) }" },
"orderFixed": [0, "asc"],
"ordering": false,
"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
- Column ordering cannot be changed interactively with server-side processing (only supported with client-side processing)
- Nested grouping is not supported
- Grouping information is not exported (PDF, CSV, etc)
0 Comments