Server-side row grouping demo

Z

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 lineProduct IDProduct nameVendorStockPriceRetail priceDescription
Product lineProduct IDProduct nameVendorStockPriceRetail priceDescription


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

Submit a Comment

Your email address will not be published. Required fields are marked *